@trii/components 2.0.27 → 2.0.29

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress, Tooltip, Chip, Popper, ClickAwayListener, CardContent, Modal, Backdrop, Fade } from '@mui/material';
+import React__default, { useCallback, useEffect, useState, useMemo, useRef, Children, isValidElement, cloneElement } from 'react';
+import { styled as styled$3, Box, IconButton, Avatar, Typography, CircularProgress as CircularProgress$2, Tooltip, Chip, Popper, ClickAwayListener, CardContent, Stack, Popover, Autocomplete, TextField, Modal, Backdrop, Fade, Slide } from '@mui/material';
 import { withEmotionCache, ThemeContext, CacheProvider, Global, css, keyframes } from '@emotion/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1407,6 +1407,15 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
+function chainPropTypes(propType1, propType2) {
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+  return function validate(...args) {
+    return propType1(...args) || propType2(...args);
+  };
+}
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -2652,6 +2661,45 @@ if (process.env.NODE_ENV !== 'production') {
 var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
+function isClassComponent(elementType) {
+  // elementType.prototype?.isReactComponent
+  const {
+    prototype = {}
+  } = elementType;
+  return Boolean(prototype.isReactComponent);
+}
+function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
+  const propValue = props[propName];
+  const safePropName = propFullName || propName;
+  if (propValue == null ||
+  // When server-side rendering React doesn't warn either.
+  // This is not an accurate check for SSR.
+  // This is only in place for emotion compat.
+  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
+  typeof window === 'undefined') {
+    return null;
+  }
+  let warningHint;
+
+  /**
+   * Blacklisting instead of whitelisting
+   *
+   * Blacklisting will miss some components, such as React.Fragment. Those will at least
+   * trigger a warning in React.
+   * We can't whitelist because there is no safe way to detect React.forwardRef
+   * or class components. "Safe" means there's no public API.
+   *
+   */
+  if (typeof propValue === 'function' && !isClassComponent(propValue)) {
+    warningHint = 'Did you accidentally provide a plain function component instead?';
+  }
+  if (warningHint !== undefined) {
+    return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` + `Expected an element type that can hold a ref. ${warningHint} ` + 'For more information see https://mui.com/r/caveat-with-refs-guide');
+  }
+  return null;
+}
+var elementTypeAcceptingRef$1 = chainPropTypes(PropTypes.elementType, elementTypeAcceptingRef);
+
 /**
  * WARNING: Don't import this directly.
  * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
@@ -3018,6 +3066,9 @@ var getDisplayName = /*#__PURE__*/Object.freeze({
 	getFunctionName: getFunctionName
 });
 
+const refType = PropTypes.oneOfType([PropTypes.func, PropTypes.object]);
+var refType$1 = refType;
+
 // It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
 //
 // A strict capitalization should uppercase the first letter of each word in the sentence.
@@ -3270,6 +3321,34 @@ function useForkRef(...refs) {
   }, refs);
 }
 
+const UNINITIALIZED = {};
+
+/**
+ * A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
+ * initialization argument, so the initialization function doesn't need to be an inline closure.
+ *
+ * @usage
+ *   const ref = useLazyRef(sortColumns, columns)
+ */
+function useLazyRef(init, initArg) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}
+
+const EMPTY = [];
+
+/**
+ * A React.useEffect equivalent that runs once, when the component is mounted.
+ */
+function useOnMount(fn) {
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(fn, EMPTY);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}
+
 class Timeout {
   constructor() {
     this.currentId = null;
@@ -3297,6 +3376,11 @@ class Timeout {
     }, delay);
   }
 }
+function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}
 
 let hadKeyboardEvent = true;
 let hadFocusVisibleRecently = false;
@@ -5706,7 +5790,7 @@ var styledEngine = /*#__PURE__*/Object.freeze({
 	keyframes: keyframes
 });
 
-var require$$3 = /*@__PURE__*/getAugmentedNamespace(styledEngine);
+var require$$1$1 = /*@__PURE__*/getAugmentedNamespace(styledEngine);
 
 var require$$4 = /*@__PURE__*/getAugmentedNamespace(deepmerge);
 
@@ -5714,7 +5798,7 @@ var require$$5 = /*@__PURE__*/getAugmentedNamespace(capitalize);
 
 var require$$6 = /*@__PURE__*/getAugmentedNamespace(getDisplayName);
 
-const _excluded$8 = ["values", "unit", "step"];
+const _excluded$d = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5748,7 +5832,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$8);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$d);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -5811,7 +5895,7 @@ function merge(acc, item) {
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
-const values = {
+const values$1 = {
   xs: 0,
   // phone
   sm: 600,
@@ -5826,7 +5910,7 @@ const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
   keys: ['xs', 'sm', 'md', 'lg', 'xl'],
-  up: key => `@media (min-width:${values[key]}px)`
+  up: key => `@media (min-width:${values$1[key]}px)`
 };
 function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
@@ -5841,7 +5925,7 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
       // key is breakpoint
-      if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      if (Object.keys(themeBreakpoints.values || values$1).indexOf(breakpoint) !== -1) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {
@@ -6305,7 +6389,7 @@ const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
       var _props$theme, _props$theme2;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
+      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$1[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
@@ -6848,7 +6932,7 @@ function applyStyles(key, styles) {
   return {};
 }
 
-const _excluded$7 = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$c = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$2(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6856,7 +6940,7 @@ function createTheme$2(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$7);
+    other = _objectWithoutPropertiesLoose(options, _excluded$c);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge$1({
@@ -6891,7 +6975,7 @@ var createTheme$1 = /*#__PURE__*/Object.freeze({
 
 var require$$7 = /*@__PURE__*/getAugmentedNamespace(createTheme$1);
 
-const _excluded$6 = ["sx"];
+const _excluded$b = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -6912,7 +6996,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const {
     systemProps,
     otherProps
@@ -6946,22 +7030,22 @@ var styleFunctionSx = /*#__PURE__*/Object.freeze({
 
 var require$$8 = /*@__PURE__*/getAugmentedNamespace(styleFunctionSx);
 
-var _interopRequireDefault$3 = interopRequireDefaultExports;
+var _interopRequireDefault$9 = interopRequireDefaultExports;
 Object.defineProperty(createStyled$2, "__esModule", {
   value: true
 });
 var _default = createStyled$2.default = createStyled;
 createStyled$2.shouldForwardProp = shouldForwardProp;
 createStyled$2.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault$3(require_extends());
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault$3(requireObjectWithoutPropertiesLoose());
-var _styledEngine = _interopRequireWildcard(require$$3);
+var _extends2 = _interopRequireDefault$9(require_extends());
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault$9(requireObjectWithoutPropertiesLoose());
+var _styledEngine = _interopRequireWildcard(require$$1$1);
 var _deepmerge = require$$4;
-var _capitalize = _interopRequireDefault$3(require$$5);
-var _getDisplayName = _interopRequireDefault$3(require$$6);
-var _createTheme = _interopRequireDefault$3(require$$7);
-var _styleFunctionSx = _interopRequireDefault$3(require$$8);
-const _excluded$5 = ["ownerState"],
+var _capitalize = _interopRequireDefault$9(require$$5);
+var _getDisplayName = _interopRequireDefault$9(require$$6);
+var _createTheme = _interopRequireDefault$9(require$$7);
+var _styleFunctionSx = _interopRequireDefault$9(require$$8);
+const _excluded$a = ["ownerState"],
   _excluded2 = ["variants"],
   _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
@@ -7015,7 +7099,7 @@ function processStyleArg(callableStyle, _ref, layerName) {
   let {
       ownerState
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$5);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$a);
   const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
     ownerState
   }, props)) : callableStyle;
@@ -7230,11 +7314,11 @@ var require$$1 = /*@__PURE__*/getAugmentedNamespace(formatMuiErrorMessage);
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(clamp);
 
-var _interopRequireDefault$2 = interopRequireDefaultExports;
+var _interopRequireDefault$8 = interopRequireDefaultExports;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true
 });
-colorManipulator.alpha = alpha;
+var alpha_1 = colorManipulator.alpha = alpha;
 colorManipulator.blend = blend;
 colorManipulator.colorChannel = void 0;
 var darken_1 = colorManipulator.darken = darken;
@@ -7252,8 +7336,8 @@ colorManipulator.private_safeEmphasize = private_safeEmphasize;
 colorManipulator.private_safeLighten = private_safeLighten;
 colorManipulator.recomposeColor = recomposeColor;
 colorManipulator.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault$2(require$$1);
-var _clamp = _interopRequireDefault$2(require$$2);
+var _formatMuiErrorMessage2 = _interopRequireDefault$8(require$$1);
+var _clamp = _interopRequireDefault$8(require$$2);
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -7733,7 +7817,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$4 = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$9 = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -7902,7 +7986,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$4);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$9);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -8026,7 +8110,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$3 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$8 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -8057,7 +8141,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -8125,7 +8209,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$2 = ["duration", "easing", "delay"];
+const _excluded$7 = ["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 = {
@@ -8176,7 +8260,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2);
+      other = _objectWithoutPropertiesLoose(options, _excluded$7);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -8226,7 +8310,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$1 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$6 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -8234,7 +8318,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$1);
+    other = _objectWithoutPropertiesLoose(options, _excluded$6);
   if (options.vars &&
   // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
   // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
@@ -8305,13 +8389,13 @@ function slotShouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
 }
 
-const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'classes';
-var rootShouldForwardProp$1 = rootShouldForwardProp;
+const rootShouldForwardProp$1 = prop => slotShouldForwardProp(prop) && prop !== 'classes';
+var rootShouldForwardProp$2 = rootShouldForwardProp$1;
 
 const styled = _default({
   themeId: THEME_ID,
   defaultTheme: defaultTheme$1,
-  rootShouldForwardProp: rootShouldForwardProp$1
+  rootShouldForwardProp: rootShouldForwardProp$2
 });
 var styled$1 = styled;
 
@@ -8320,8 +8404,8 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses = ownerState => {
+const _excluded$5 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$4 = ownerState => {
   const {
     color,
     fontSize,
@@ -8388,7 +8472,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
   const ownerState = _extends$1({}, props, {
     color,
@@ -8403,7 +8487,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses$4(ownerState);
   return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -8603,27 +8687,27 @@ function requireCreateSvgIcon () {
 	return createSvgIcon;
 }
 
-var _interopRequireDefault$1 = interopRequireDefaultExports;
+var _interopRequireDefault$7 = interopRequireDefaultExports;
 Object.defineProperty(ArrowForward, "__esModule", {
   value: true
 });
-var default_1$1 = ArrowForward.default = void 0;
-var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
-var _jsxRuntime$1 = jsxRuntimeExports;
-default_1$1 = ArrowForward.default = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.jsx)("path", {
+var default_1$7 = ArrowForward.default = void 0;
+var _createSvgIcon$7 = _interopRequireDefault$7(requireCreateSvgIcon());
+var _jsxRuntime$7 = jsxRuntimeExports;
+default_1$7 = ArrowForward.default = (0, _createSvgIcon$7.default)( /*#__PURE__*/(0, _jsxRuntime$7.jsx)("path", {
   d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
 }), 'ArrowForward');
 
 var Message = {};
 
-var _interopRequireDefault = interopRequireDefaultExports;
+var _interopRequireDefault$6 = interopRequireDefaultExports;
 Object.defineProperty(Message, "__esModule", {
   value: true
 });
-var default_1 = Message.default = void 0;
-var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
-var _jsxRuntime = jsxRuntimeExports;
-default_1 = Message.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+var default_1$6 = Message.default = void 0;
+var _createSvgIcon$6 = _interopRequireDefault$6(requireCreateSvgIcon());
+var _jsxRuntime$6 = jsxRuntimeExports;
+default_1$6 = Message.default = (0, _createSvgIcon$6.default)( /*#__PURE__*/(0, _jsxRuntime$6.jsx)("path", {
   d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-2 12H6v-2h12zm0-3H6V9h12zm0-3H6V6h12z"
 }), 'Message');
 
@@ -8648,7 +8732,7 @@ const HeaderContainer$1 = styled$3(Box)({
     marginBottom: '16px',
     position: 'relative',
 });
-const ContactAvatar$1 = styled$3(Avatar)({
+const ContactAvatar = styled$3(Avatar)({
     width: 60,
     height: 60,
     marginBottom: 8,
@@ -8703,7 +8787,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToContacts(e);
                                 onClose();
                             }
-                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
+                        }, disabled: !contactId, "aria-label": "View contact details", children: jsxRuntimeExports.jsx(default_1$7, { fontSize: "small" }) }), jsxRuntimeExports.jsx(SmallIconButton, { color: "info", size: "small", onClick: (e) => {
                             handleNavigateToConversations(e);
                             onClose();
                         }, onMouseDown: (e) => {
@@ -8712,7 +8796,7 @@ const Header$1 = ({ imgUrl, name, contactId, navigate, isLoading = false, onErro
                                 handleNavigateToConversations(e);
                                 onClose();
                             }
-                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(CircularProgress, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar$1, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
+                        }, "aria-label": "Go to conversations", children: jsxRuntimeExports.jsx(default_1$6, { fontSize: "small" }) })] }), isLoading ? (jsxRuntimeExports.jsx(LoadingContainer, { children: jsxRuntimeExports.jsx(CircularProgress$2, { size: 24 }) })) : (jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) })), jsxRuntimeExports.jsx(ContactName$1, { variant: "h6", title: displayName, children: displayName })] }));
 };
 
 const Container$1 = styled$3(Box)({
@@ -8777,6 +8861,12 @@ const ContactMethod = ({ icon, contactList, title, showTitle = true, }) => {
     return (jsxRuntimeExports.jsxs(Container$1, { children: [showTitle && (jsxRuntimeExports.jsx(TitleBox, { children: jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", fontWeight: "bold", gutterBottom: true, mt: 2, children: title }) })), contactList?.map(renderContactInfo)] }));
 };
 
+var Contacts = {};
+
+var contacts = {};
+
+Object.defineProperty(contacts, "__esModule", { value: true });
+contacts.GoogleAccountInfo = contacts.GooglePeopleIntegration = contacts.IntegrationButton_format = contacts.IntegrationButton_method = contacts.ContactField_type = contacts.ContactOrigin = void 0;
 var ContactOrigin;
 (function (ContactOrigin) {
     ContactOrigin[ContactOrigin["MANUAL"] = 0] = "MANUAL";
@@ -8784,7 +8874,7 @@ var ContactOrigin;
     ContactOrigin[ContactOrigin["CALL"] = 2] = "CALL";
     ContactOrigin[ContactOrigin["TICKET"] = 3] = "TICKET";
     ContactOrigin[ContactOrigin["FORM"] = 4] = "FORM";
-})(ContactOrigin || (ContactOrigin = {}));
+})(ContactOrigin || (contacts.ContactOrigin = ContactOrigin = {}));
 var ContactField_type;
 (function (ContactField_type) {
     ContactField_type[ContactField_type["TEXT"] = 0] = "TEXT";
@@ -8800,19 +8890,30 @@ var ContactField_type;
     ContactField_type[ContactField_type["NUMBER_DECIMAL"] = 22] = "NUMBER_DECIMAL";
     ContactField_type[ContactField_type["NUMBER_CURRENCY"] = 23] = "NUMBER_CURRENCY";
     ContactField_type[ContactField_type["NUMBER_ACCOUNTING"] = 24] = "NUMBER_ACCOUNTING";
-})(ContactField_type || (ContactField_type = {}));
+})(ContactField_type || (contacts.ContactField_type = ContactField_type = {}));
 var IntegrationButton_method;
 (function (IntegrationButton_method) {
     IntegrationButton_method[IntegrationButton_method["GET"] = 1] = "GET";
     IntegrationButton_method[IntegrationButton_method["POST"] = 2] = "POST";
-})(IntegrationButton_method || (IntegrationButton_method = {}));
+})(IntegrationButton_method || (contacts.IntegrationButton_method = IntegrationButton_method = {}));
 var IntegrationButton_format;
 (function (IntegrationButton_format) {
     IntegrationButton_format[IntegrationButton_format["JSON"] = 1] = "JSON";
     IntegrationButton_format[IntegrationButton_format["HTML"] = 2] = "HTML";
     IntegrationButton_format[IntegrationButton_format["HTML_newtab"] = 3] = "HTML_newtab";
-})(IntegrationButton_format || (IntegrationButton_format = {}));
+})(IntegrationButton_format || (contacts.IntegrationButton_format = IntegrationButton_format = {}));
+class GooglePeopleIntegration {
+}
+contacts.GooglePeopleIntegration = GooglePeopleIntegration;
+class GoogleAccountInfo {
+}
+contacts.GoogleAccountInfo = GoogleAccountInfo;
 
+var segments = {};
+
+Object.defineProperty(segments, "__esModule", { value: true });
+segments.Segment_Filter_Account = segments.Segment_Filter_Geography = segments.Segment_Filter_Details = segments.Segment_Filter_Operator = void 0;
+const contacts_1 = contacts;
 var Segment_Filter_Operator;
 (function (Segment_Filter_Operator) {
     Segment_Filter_Operator[Segment_Filter_Operator["NULL"] = 0] = "NULL";
@@ -8826,42 +8927,83 @@ var Segment_Filter_Operator;
     Segment_Filter_Operator[Segment_Filter_Operator["CONTAINS"] = 8] = "CONTAINS";
     Segment_Filter_Operator[Segment_Filter_Operator["NOT_CONTAINS"] = 9] = "NOT_CONTAINS";
     Segment_Filter_Operator[Segment_Filter_Operator["ANY_VALUE"] = 10] = "ANY_VALUE";
-})(Segment_Filter_Operator || (Segment_Filter_Operator = {}));
-[
+    Segment_Filter_Operator[Segment_Filter_Operator["NOT_EQUAL"] = 11] = "NOT_EQUAL";
+})(Segment_Filter_Operator || (segments.Segment_Filter_Operator = Segment_Filter_Operator = {}));
+segments.Segment_Filter_Details = [
     {
         key: "details.name",
-        type: ContactField_type.TEXT
+        type: contacts_1.ContactField_type.TEXT
     },
     {
         key: "details.email",
-        type: ContactField_type.TEXT
+        type: contacts_1.ContactField_type.TEXT
     },
 ];
-[
+segments.Segment_Filter_Geography = [
     {
         key: "geography.country",
-        type: ContactField_type.TEXT
+        type: contacts_1.ContactField_type.TEXT
     },
     {
         key: "details.city",
-        type: ContactField_type.TEXT
+        type: contacts_1.ContactField_type.TEXT
     }
 ];
-[
+segments.Segment_Filter_Account = [
     {
         key: "account.name",
-        type: ContactField_type.TEXT
+        type: contacts_1.ContactField_type.TEXT
     },
     {
         key: "account.email",
-        type: ContactField_type.TEXT
+        type: contacts_1.ContactField_type.TEXT
     },
     {
         key: "account.numberOfEmployees",
-        type: ContactField_type.NUMBER_INTEGER
+        type: contacts_1.ContactField_type.NUMBER_INTEGER
     }
 ];
 
+var Label$1 = {};
+
+Object.defineProperty(Label$1, "__esModule", { value: true });
+
+var Note = {};
+
+Object.defineProperty(Note, "__esModule", { value: true });
+
+var File = {};
+
+Object.defineProperty(File, "__esModule", { value: true });
+
+var Import = {};
+
+Object.defineProperty(Import, "__esModule", { value: true });
+
+(function (exports) {
+	var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    var desc = Object.getOwnPropertyDescriptor(m, k);
+	    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+	      desc = { enumerable: true, get: function() { return m[k]; } };
+	    }
+	    Object.defineProperty(o, k2, desc);
+	}) : (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    o[k2] = m[k];
+	}));
+	var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports) {
+	    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+	};
+	Object.defineProperty(exports, "__esModule", { value: true });
+	__exportStar(contacts, exports);
+	__exportStar(segments, exports);
+	__exportStar(Label$1, exports);
+	__exportStar(Note, exports);
+	__exportStar(File, exports);
+	__exportStar(Import, exports); 
+} (Contacts));
+
 function commonjsRequire(path) {
 	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
@@ -14590,24 +14732,24 @@ const Properties = ({ properties, title }) => {
             const isValidDate = moment(value, moment.ISO_8601).isValid();
             const format = (formatStr) => moment(value).format(formatStr);
             switch (type) {
-                case ContactField_type.TIME:
+                case Contacts.ContactField_type.TIME:
                     return isValidDate ? format('HH:mm') : value;
-                case ContactField_type.DATE:
+                case Contacts.ContactField_type.DATE:
                     return isValidDate ? format('DD/MM/YYYY') : value;
-                case ContactField_type.TIMERANGE:
-                case ContactField_type.DATERANGE:
+                case Contacts.ContactField_type.TIMERANGE:
+                case Contacts.ContactField_type.DATERANGE:
                     if (isValidDate) {
-                        return type === ContactField_type.TIMERANGE
+                        return type === Contacts.ContactField_type.TIMERANGE
                             ? format('HH:mm')
                             : format('DD/MM/YYYY');
                     }
                     const parts = value.split(' ');
                     if (parts.length === 2) {
                         const [start, end] = parts;
-                        const startFormatted = type === ContactField_type.TIMERANGE
+                        const startFormatted = type === Contacts.ContactField_type.TIMERANGE
                             ? moment(start).format('HH:mm')
                             : moment(start).format('DD/MM/YYYY');
-                        const endFormatted = type === ContactField_type.TIMERANGE
+                        const endFormatted = type === Contacts.ContactField_type.TIMERANGE
                             ? moment(end).format('HH:mm')
                             : moment(end).format('DD/MM/YYYY');
                         return `${startFormatted} - ${endFormatted}`;
@@ -14831,6 +14973,142 @@ const ContactInfoPopup = ({ open, anchorEl, onClose, contactData, avatarImgUrl,
     return (jsxRuntimeExports.jsx(Popper, { sx: { zIndex: 1300 }, open: open, anchorEl: anchorEl, placement: "bottom-start", "data-popper-child": "true", children: jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway: onClose, children: jsxRuntimeExports.jsx(PopupContainer, { children: jsxRuntimeExports.jsxs(CardContent, { children: [jsxRuntimeExports.jsx(Header$1, { navigate: navigate, contactId: contactData?.id, imgUrl: avatarImgUrl, name: contactData?.name, onClose: onClose, isBusiness: dataIsBusiness }), jsxRuntimeExports.jsx(LabelsSection, { contactData: contactData, title: t('labels') }), dataIsContact && (jsxRuntimeExports.jsx(BusinessSection, { contactData: contactData, title: t('business') })), dataIsBusiness && (jsxRuntimeExports.jsx(MembersSection, { contactData: contactData, title: t('businessMembers'), navigate: navigate })), contactMethods.map((method, index) => (jsxRuntimeExports.jsx(ContactMethod, { icon: method.icon, title: method.title, contactList: method.contactList, showTitle: method.showTitle }, index))), jsxRuntimeExports.jsx(Properties, { properties: contactData?.properties, title: t('properties') })] }) }) }) }));
 };
 
+var Edit = {};
+
+var _interopRequireDefault$5 = interopRequireDefaultExports;
+Object.defineProperty(Edit, "__esModule", {
+  value: true
+});
+var default_1$5 = Edit.default = void 0;
+var _createSvgIcon$5 = _interopRequireDefault$5(requireCreateSvgIcon());
+var _jsxRuntime$5 = jsxRuntimeExports;
+default_1$5 = Edit.default = (0, _createSvgIcon$5.default)( /*#__PURE__*/(0, _jsxRuntime$5.jsx)("path", {
+  d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
+}), 'Edit');
+
+var Label = {};
+
+var _interopRequireDefault$4 = interopRequireDefaultExports;
+Object.defineProperty(Label, "__esModule", {
+  value: true
+});
+var default_1$4 = Label.default = void 0;
+var _createSvgIcon$4 = _interopRequireDefault$4(requireCreateSvgIcon());
+var _jsxRuntime$4 = jsxRuntimeExports;
+default_1$4 = Label.default = (0, _createSvgIcon$4.default)( /*#__PURE__*/(0, _jsxRuntime$4.jsx)("path", {
+  d: "M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12z"
+}), 'Label');
+
+const Tags = ({ tags, t, onEditTags }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const safeTags = useMemo(() => tags ?? [], [tags]);
+    const MAX_VISIBLE = 4;
+    const visibleTags = safeTags.slice(0, MAX_VISIBLE);
+    const hiddenCount = Math.max(safeTags.length - visibleTags.length, 0);
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    return (jsxRuntimeExports.jsxs(Box, { sx: {
+            width: '100%',
+            mt: 1,
+            position: 'relative',
+            '&:hover .tags-action, &:focus-within .tags-action': {
+                opacity: 1,
+            },
+        }, children: [jsxRuntimeExports.jsx(Box, { sx: { maxWidth: 320, mx: 'auto', pr: 4 }, children: jsxRuntimeExports.jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", justifyContent: "center", children: [visibleTags.map((tag) => (jsxRuntimeExports.jsx(Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
+                                borderRadius: 999,
+                                maxWidth: 140,
+                                '& .MuiChip-label': {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                },
+                            } }, tag.id))), hiddenCount > 0 ? (jsxRuntimeExports.jsx(Chip, { label: `+${hiddenCount}`, size: "small", variant: "outlined", onClick: handleOpen, sx: { borderRadius: 999 } })) : null] }) }), jsxRuntimeExports.jsx(IconButton, { className: "tags-action", size: "small", "aria-label": safeTags.length ? t('tags.edit') : t('tags.add'), onClick: onEditTags, sx: {
+                    position: 'absolute',
+                    right: 0,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    opacity: 0,
+                    transition: 'opacity 0.2s ease-in-out',
+                }, children: safeTags.length ? (jsxRuntimeExports.jsx(default_1$5, { fontSize: "small" })) : (jsxRuntimeExports.jsx(default_1$4, { fontSize: "small" })) }), jsxRuntimeExports.jsx(Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: jsxRuntimeExports.jsxs(Box, { sx: { p: 1.5, maxWidth: 320, maxHeight: 240, overflowY: 'auto' }, children: [jsxRuntimeExports.jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('tags') }), jsxRuntimeExports.jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: safeTags.map((tag) => (jsxRuntimeExports.jsx(Chip, { label: tag.name, size: "small", variant: "outlined", sx: {
+                                    borderRadius: 999,
+                                    maxWidth: 160,
+                                    '& .MuiChip-label': {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                    },
+                                } }, tag.id))) })] }) })] }));
+};
+
+var Delete = {};
+
+var _interopRequireDefault$3 = interopRequireDefaultExports;
+Object.defineProperty(Delete, "__esModule", {
+  value: true
+});
+var default_1$3 = Delete.default = void 0;
+var _createSvgIcon$3 = _interopRequireDefault$3(requireCreateSvgIcon());
+var _jsxRuntime$3 = jsxRuntimeExports;
+default_1$3 = Delete.default = (0, _createSvgIcon$3.default)( /*#__PURE__*/(0, _jsxRuntime$3.jsx)("path", {
+  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"
+}), 'Delete');
+
+var PhotoCamera = {};
+
+var _interopRequireDefault$2 = interopRequireDefaultExports;
+Object.defineProperty(PhotoCamera, "__esModule", {
+  value: true
+});
+var default_1$2 = PhotoCamera.default = void 0;
+var _createSvgIcon$2 = _interopRequireDefault$2(requireCreateSvgIcon());
+var _jsxRuntime$2 = jsxRuntimeExports;
+default_1$2 = PhotoCamera.default = (0, _createSvgIcon$2.default)([/*#__PURE__*/(0, _jsxRuntime$2.jsx)("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3.2"
+}, "0"), /*#__PURE__*/(0, _jsxRuntime$2.jsx)("path", {
+  d: "M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5"
+}, "1")], 'PhotoCamera');
+
+const AvatarWithActions = ({ src, alt, onError, onUpload, onDelete, isUploading, isDeleting, t, }) => {
+    return (jsxRuntimeExports.jsxs(Box, { sx: {
+            width: 60,
+            height: 60,
+            mb: 1,
+            position: 'relative',
+            '&:hover .avatar-actions, &:focus-within .avatar-actions': {
+                opacity: 1,
+                pointerEvents: 'auto',
+            },
+        }, children: [jsxRuntimeExports.jsx(Avatar, { src: src, alt: alt, onError: onError, sx: {
+                    width: 60,
+                    height: 60,
+                } }), jsxRuntimeExports.jsxs(Box, { className: "avatar-actions", sx: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 0.5,
+                    bgcolor: 'rgba(0, 0, 0, 0.35)',
+                    opacity: 0,
+                    pointerEvents: 'none',
+                    transition: 'opacity 0.2s ease-in-out',
+                }, children: [jsxRuntimeExports.jsx(IconButton, { size: "small", "aria-label": t('avatar.upload'), onClick: onUpload, disabled: Boolean(isUploading), sx: {
+                            color: 'common.white',
+                            bgcolor: 'rgba(0, 0, 0, 0.25)',
+                            '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.35)' },
+                        }, children: jsxRuntimeExports.jsx(default_1$2, { fontSize: "small" }) }), jsxRuntimeExports.jsx(IconButton, { size: "small", "aria-label": t('avatar.delete'), onClick: onDelete, disabled: Boolean(isDeleting), sx: {
+                            color: 'common.white',
+                            bgcolor: 'rgba(0, 0, 0, 0.25)',
+                            '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.35)' },
+                        }, children: jsxRuntimeExports.jsx(default_1$3, { fontSize: "small" }) })] })] }));
+};
+
 const HeaderContainer = styled$3(Box)({
     display: 'flex',
     flexDirection: 'column',
@@ -14838,11 +15116,6 @@ const HeaderContainer = styled$3(Box)({
     marginBottom: '16px',
     position: 'relative',
 });
-const ContactAvatar = styled$3(Avatar)({
-    width: 60,
-    height: 60,
-    marginBottom: 8,
-});
 const ContactName = styled$3(Typography)({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -14850,9 +15123,9 @@ const ContactName = styled$3(Typography)({
     maxWidth: 200,
     textAlign: 'center',
 });
-const Header = ({ imgUrl, displayName = 'Unknown Contact', onError, }) => {
+const Header = ({ imgUrl, displayName, onError, tags, t, onEditTags, onUploadPhoto, onPhotoFileChange, photoInputRef, isUploadingPhoto, onDeletePhoto, isDeletingPhoto, }) => {
     const avatarAlt = `Avatar for ${displayName}`;
-    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx(ContactAvatar, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')) }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName })] }));
+    return (jsxRuntimeExports.jsxs(HeaderContainer, { children: [jsxRuntimeExports.jsx("input", { ref: photoInputRef, type: "file", accept: "image/*", onChange: onPhotoFileChange, style: { display: 'none' } }), jsxRuntimeExports.jsx(AvatarWithActions, { src: imgUrl, alt: avatarAlt, onError: () => onError?.(new Error('Failed to load avatar')), onUpload: onUploadPhoto, isUploading: isUploadingPhoto, onDelete: onDeletePhoto, isDeleting: isDeletingPhoto, t: t }), jsxRuntimeExports.jsx(ContactName, { variant: "h6", title: displayName, children: displayName }), jsxRuntimeExports.jsx(Tags, { tags: tags, t: t, onEditTags: onEditTags })] }));
 };
 
 class ApiError extends Error {
@@ -14886,16 +15159,79 @@ async function requestJson({ url, method = 'GET', headers, body, signal, }) {
     }
     return parsedBody;
 }
+async function requestFormData({ url, method = 'POST', headers, formData, signal, }) {
+    const res = await globalThis.fetch(url, {
+        method,
+        headers: {
+            ...(headers ?? {}),
+        },
+        body: formData,
+        signal,
+    });
+    const contentType = res.headers.get('content-type') || '';
+    const isJson = contentType.includes('application/json');
+    const parsedBody = isJson ? await res.json().catch(() => null) : await res.text().catch(() => null);
+    if (!res.ok) {
+        const message = typeof parsedBody === 'object' && parsedBody && 'message' in parsedBody
+            ? String(parsedBody.message)
+            : `Request failed with status ${res.status}`;
+        throw new ApiError(message, res.status, parsedBody);
+    }
+    return parsedBody;
+}
 
 function joinUrl(baseUrl, path) {
     const normalizedBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
     const normalizedPath = path.startsWith('/') ? path : `/${path}`;
     return `${normalizedBase}${normalizedPath}`;
 }
-async function fetchContact({ baseUrl, contactId, signal }) {
-    const url = joinUrl(baseUrl, `/contacts/${encodeURIComponent(contactId)}`);
+function getApiUrls(baseUrl, spaceId) {
+    const encodedSpaceId = encodeURIComponent(spaceId);
+    return {
+        CONTACTS: joinUrl(baseUrl, `/contacts/${encodedSpaceId}`),
+        MEDIA: joinUrl(baseUrl, `/media/${encodedSpaceId}`),
+        SETTINGS: joinUrl(baseUrl, `/settings/${encodedSpaceId}`),
+    };
+}
+
+async function fetchLabels({ baseUrl, spaceId, signal }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, '/labels');
+    return requestJson({ url, signal });
+}
+async function fetchContact({ baseUrl, spaceId, contactId, signal }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, `/contacts/${encodeURIComponent(contactId)}`);
+    return requestJson({ url, signal });
+}
+async function updateEntity({ baseUrl, spaceId, entityType, entityId, body, signal }) {
+    const path = entityType === 'business'
+        ? `/business/${encodeURIComponent(entityId)}`
+        : `/${encodeURIComponent(entityId)}`;
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, path);
+    return requestJson({ url, method: 'PUT', body, signal });
+}
+async function deleteEntityPhoto({ baseUrl, spaceId, entityType, entityId, signal }) {
+    const path = entityType === 'business'
+        ? `/business/${encodeURIComponent(entityId)}/photo`
+        : `/${encodeURIComponent(entityId)}/photo`;
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.CONTACTS, path);
+    return requestJson({ url, method: 'DELETE', signal });
+}
+async function fetchUserTrii({ baseUrl, spaceId, signal }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const url = joinUrl(urls.SETTINGS, `/user`);
     return requestJson({ url, signal });
 }
+async function uploadAvatar({ baseUrl, spaceId, contactId, file, signal }) {
+    const urls = getApiUrls(baseUrl, spaceId);
+    const fd = new FormData();
+    fd.append('file', file, file.name);
+    const url = joinUrl(urls.MEDIA, `/upload?module=contacts&folderType=avatars&contactId=${encodeURIComponent(contactId)}`);
+    return requestFormData({ url, formData: fd, signal });
+}
 
 /**
  * Type guard to check if an object is an IBusiness
@@ -14945,20 +15281,50 @@ function isContact(obj) {
         (!obj.businessId || typeof obj.businessId === 'string'));
 }
 
-function useEditContactModalController({ open, baseUrl, contactId, }) {
+function useEditContactModalController({ open, baseUrl, spaceId, contactId, }) {
     const abortRef = useRef(null);
     const [state, setState] = useState({
         isLoading: false,
         error: null,
         contactData: null,
+        labels: [],
+        labelsLoading: false,
+        labelsError: null,
     });
-    const canFetch = useMemo(() => Boolean(open && baseUrl && contactId), [open, baseUrl, contactId]);
+    const canFetch = useMemo(() => Boolean(open && baseUrl && spaceId && contactId), [open, baseUrl, spaceId, contactId]);
     useEffect(() => {
         if (open)
             return;
         abortRef.current?.abort();
-        setState({ isLoading: false, error: null, contactData: null });
+        setState({
+            isLoading: false,
+            error: null,
+            contactData: null,
+            labels: [],
+            labelsLoading: false,
+            labelsError: null,
+        });
     }, [open]);
+    const canFetchLabels = useMemo(() => Boolean(open && baseUrl && spaceId), [open, baseUrl, spaceId]);
+    useEffect(() => {
+        if (!canFetchLabels) {
+            return;
+        }
+        const controller = new AbortController();
+        setState((prev) => ({ ...prev, labelsLoading: true, labelsError: null }));
+        fetchLabels({ baseUrl: baseUrl, spaceId: spaceId, signal: controller.signal })
+            .then((labels) => {
+            setState((prev) => ({ ...prev, labels, labelsLoading: false, labelsError: null }));
+        })
+            .catch((err) => {
+            if (controller.signal.aborted)
+                return;
+            setState((prev) => ({ ...prev, labelsLoading: false, labelsError: err }));
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [canFetchLabels, baseUrl, spaceId]);
     useEffect(() => {
         if (!canFetch) {
             return;
@@ -14966,10 +15332,10 @@ function useEditContactModalController({ open, baseUrl, contactId, }) {
         abortRef.current?.abort();
         const controller = new AbortController();
         abortRef.current = controller;
-        setState({ isLoading: true, error: null, contactData: null });
-        fetchContact({ baseUrl: baseUrl, contactId: contactId, signal: controller.signal })
+        setState((prev) => ({ ...prev, isLoading: true, error: null, contactData: null }));
+        fetchContact({ baseUrl: baseUrl, spaceId: spaceId, contactId: contactId, signal: controller.signal })
             .then((data) => {
-            setState({ isLoading: false, error: null, contactData: data });
+            setState((prev) => ({ ...prev, isLoading: false, error: null, contactData: data }));
         })
             .catch((err) => {
             if (controller.signal.aborted)
@@ -14979,7 +15345,7 @@ function useEditContactModalController({ open, baseUrl, contactId, }) {
         return () => {
             controller.abort();
         };
-    }, [canFetch, baseUrl, contactId]);
+    }, [canFetch, baseUrl, spaceId, contactId]);
     const selectors = useMemo(() => {
         const contactData = state.contactData;
         const business = isBusiness(contactData);
@@ -14996,13 +15362,16 @@ function useEditContactModalController({ open, baseUrl, contactId, }) {
         else if (contact) {
             displayName = `${contactData.firstName} ${contactData.lastName}`.trim();
         }
+        const tags = contactData?.tags ?? [];
         return {
             isBusiness: business,
             isContact: contact,
             contactType,
             displayName,
+            tags,
+            labels: state.labels,
         };
-    }, [state.contactData]);
+    }, [state.contactData, state.labels]);
     return {
         state,
         selectors,
@@ -15013,14 +15382,2316 @@ function useEditContactModalController({ open, baseUrl, contactId, }) {
     };
 }
 
-const EditContactModal = ({ open, onClose, baseUrl, contactId, sx,
-// t
- }) => {
-    const { state, selectors } = useEditContactModalController({
-        open,
-        baseUrl,
-        contactId,
+var ArrowBack = {};
+
+var _interopRequireDefault$1 = interopRequireDefaultExports;
+Object.defineProperty(ArrowBack, "__esModule", {
+  value: true
+});
+var default_1$1 = ArrowBack.default = void 0;
+var _createSvgIcon$1 = _interopRequireDefault$1(requireCreateSvgIcon());
+var _jsxRuntime$1 = jsxRuntimeExports;
+default_1$1 = ArrowBack.default = (0, _createSvgIcon$1.default)( /*#__PURE__*/(0, _jsxRuntime$1.jsx)("path", {
+  d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
+}), 'ArrowBack');
+
+var Save = {};
+
+var _interopRequireDefault = interopRequireDefaultExports;
+Object.defineProperty(Save, "__esModule", {
+  value: true
+});
+var default_1 = Save.default = void 0;
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+var _jsxRuntime = jsxRuntimeExports;
+default_1 = Save.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z"
+}), 'Save');
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+var TransitionGroupContext = React__default.createContext(null);
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+
+/**
+ * Given `this.props.children`, return an object mapping key to child.
+ *
+ * @param {*} children `this.props.children`
+ * @return {object} Mapping of key to child
+ */
+
+function getChildMapping(children, mapFn) {
+  var mapper = function mapper(child) {
+    return mapFn && isValidElement(child) ? mapFn(child) : child;
+  };
+
+  var result = Object.create(null);
+  if (children) Children.map(children, function (c) {
+    return c;
+  }).forEach(function (child) {
+    // run the map function here instead so that the key is the computed one
+    result[child.key] = mapper(child);
+  });
+  return result;
+}
+/**
+ * When you're adding or removing children some may be added or removed in the
+ * same render pass. We want to show *both* since we want to simultaneously
+ * animate elements in and out. This function takes a previous set of keys
+ * and a new set of keys and merges them with its best guess of the correct
+ * ordering. In the future we may expose some of the utilities in
+ * ReactMultiChild to make this easy, but for now React itself does not
+ * directly have this concept of the union of prevChildren and nextChildren
+ * so we implement it here.
+ *
+ * @param {object} prev prev children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @param {object} next next children as returned from
+ * `ReactTransitionChildMapping.getChildMapping()`.
+ * @return {object} a key set that contains all keys in `prev` and all keys
+ * in `next` in a reasonable order.
+ */
+
+function mergeChildMappings(prev, next) {
+  prev = prev || {};
+  next = next || {};
+
+  function getValueForKey(key) {
+    return key in next ? next[key] : prev[key];
+  } // For each key of `next`, the list of keys to insert before that key in
+  // the combined list
+
+
+  var nextKeysPending = Object.create(null);
+  var pendingKeys = [];
+
+  for (var prevKey in prev) {
+    if (prevKey in next) {
+      if (pendingKeys.length) {
+        nextKeysPending[prevKey] = pendingKeys;
+        pendingKeys = [];
+      }
+    } else {
+      pendingKeys.push(prevKey);
+    }
+  }
+
+  var i;
+  var childMapping = {};
+
+  for (var nextKey in next) {
+    if (nextKeysPending[nextKey]) {
+      for (i = 0; i < nextKeysPending[nextKey].length; i++) {
+        var pendingNextKey = nextKeysPending[nextKey][i];
+        childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
+      }
+    }
+
+    childMapping[nextKey] = getValueForKey(nextKey);
+  } // Finally, add the keys which didn't appear before any key in `next`
+
+
+  for (i = 0; i < pendingKeys.length; i++) {
+    childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+  }
+
+  return childMapping;
+}
+
+function getProp(child, prop, props) {
+  return props[prop] != null ? props[prop] : child.props[prop];
+}
+
+function getInitialChildMapping(props, onExited) {
+  return getChildMapping(props.children, function (child) {
+    return cloneElement(child, {
+      onExited: onExited.bind(null, child),
+      in: true,
+      appear: getProp(child, 'appear', props),
+      enter: getProp(child, 'enter', props),
+      exit: getProp(child, 'exit', props)
+    });
+  });
+}
+function getNextChildMapping(nextProps, prevChildMapping, onExited) {
+  var nextChildMapping = getChildMapping(nextProps.children);
+  var children = mergeChildMappings(prevChildMapping, nextChildMapping);
+  Object.keys(children).forEach(function (key) {
+    var child = children[key];
+    if (!isValidElement(child)) return;
+    var hasPrev = (key in prevChildMapping);
+    var hasNext = (key in nextChildMapping);
+    var prevChild = prevChildMapping[key];
+    var isLeaving = isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
+
+    if (hasNext && (!hasPrev || isLeaving)) {
+      // console.log('entering', key)
+      children[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: true,
+        exit: getProp(child, 'exit', nextProps),
+        enter: getProp(child, 'enter', nextProps)
+      });
+    } else if (!hasNext && hasPrev && !isLeaving) {
+      // item is old (exiting)
+      // console.log('leaving', key)
+      children[key] = cloneElement(child, {
+        in: false
+      });
+    } else if (hasNext && hasPrev && isValidElement(prevChild)) {
+      // item hasn't changed transition states
+      // copy over the last transition props;
+      // console.log('unchanged', key)
+      children[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: prevChild.props.in,
+        exit: getProp(child, 'exit', nextProps),
+        enter: getProp(child, 'enter', nextProps)
+      });
+    }
+  });
+  return children;
+}
+
+var values = Object.values || function (obj) {
+  return Object.keys(obj).map(function (k) {
+    return obj[k];
+  });
+};
+
+var defaultProps = {
+  component: 'div',
+  childFactory: function childFactory(child) {
+    return child;
+  }
+};
+/**
+ * The `<TransitionGroup>` component manages a set of transition components
+ * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
+ * components, `<TransitionGroup>` is a state machine for managing the mounting
+ * and unmounting of components over time.
+ *
+ * Consider the example below. As items are removed or added to the TodoList the
+ * `in` prop is toggled automatically by the `<TransitionGroup>`.
+ *
+ * Note that `<TransitionGroup>`  does not define any animation behavior!
+ * Exactly _how_ a list item animates is up to the individual transition
+ * component. This means you can mix and match animations across different list
+ * items.
+ */
+
+var TransitionGroup = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TransitionGroup, _React$Component);
+
+  function TransitionGroup(props, context) {
+    var _this;
+
+    _this = _React$Component.call(this, props, context) || this;
+
+    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
+
+
+    _this.state = {
+      contextValue: {
+        isMounting: true
+      },
+      handleExited: handleExited,
+      firstRender: true
+    };
+    return _this;
+  }
+
+  var _proto = TransitionGroup.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.mounted = true;
+    this.setState({
+      contextValue: {
+        isMounting: false
+      }
     });
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.mounted = false;
+  };
+
+  TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
+    var prevChildMapping = _ref.children,
+        handleExited = _ref.handleExited,
+        firstRender = _ref.firstRender;
+    return {
+      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
+      firstRender: false
+    };
+  } // node is `undefined` when user provided `nodeRef` prop
+  ;
+
+  _proto.handleExited = function handleExited(child, node) {
+    var currentChildMapping = getChildMapping(this.props.children);
+    if (child.key in currentChildMapping) return;
+
+    if (child.props.onExited) {
+      child.props.onExited(node);
+    }
+
+    if (this.mounted) {
+      this.setState(function (state) {
+        var children = _extends$1({}, state.children);
+
+        delete children[child.key];
+        return {
+          children: children
+        };
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        Component = _this$props.component,
+        childFactory = _this$props.childFactory,
+        props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+
+    var contextValue = this.state.contextValue;
+    var children = values(this.state.children).map(childFactory);
+    delete props.appear;
+    delete props.enter;
+    delete props.exit;
+
+    if (Component === null) {
+      return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
+        value: contextValue
+      }, children);
+    }
+
+    return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
+      value: contextValue
+    }, /*#__PURE__*/React__default.createElement(Component, props, children));
+  };
+
+  return TransitionGroup;
+}(React__default.Component);
+
+TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: PropTypes.any,
+
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: PropTypes.node,
+
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: PropTypes.bool,
+
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: PropTypes.bool,
+
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: PropTypes.bool,
+
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: PropTypes.func
+} : {};
+TransitionGroup.defaultProps = defaultProps;
+var TransitionGroup$1 = TransitionGroup;
+
+function Ripple(props) {
+  const {
+    className,
+    classes,
+    pulsate = false,
+    rippleX,
+    rippleY,
+    rippleSize,
+    in: inProp,
+    onExited,
+    timeout
+  } = props;
+  const [leaving, setLeaving] = React.useState(false);
+  const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
+  const rippleStyles = {
+    width: rippleSize,
+    height: rippleSize,
+    top: -(rippleSize / 2) + rippleY,
+    left: -(rippleSize / 2) + rippleX
+  };
+  const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
+  if (!inProp && !leaving) {
+    setLeaving(true);
+  }
+  React.useEffect(() => {
+    if (!inProp && onExited != null) {
+      // react-transition-group#onExited
+      const timeoutId = setTimeout(onExited, timeout);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+    return undefined;
+  }, [onExited, inProp, timeout]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    className: rippleClassName,
+    style: rippleStyles,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      className: childClassName
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: PropTypes.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: PropTypes.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: PropTypes.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: PropTypes.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: PropTypes.number,
+  /**
+   * exit delay
+   */
+  timeout: PropTypes.number.isRequired
+} : void 0;
+
+const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+var touchRippleClasses$1 = touchRippleClasses;
+
+const _excluded$4 = ["center", "classes", "className"];
+let _$1 = t => t,
+  _t$1,
+  _t2$1,
+  _t3$1,
+  _t4$1;
+const DURATION = 550;
+const DELAY_RIPPLE = 80;
+const enterKeyframe = keyframes(_t$1 || (_t$1 = _$1`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`));
+const exitKeyframe = keyframes(_t2$1 || (_t2$1 = _$1`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`));
+const pulsateKeyframe = keyframes(_t3$1 || (_t3$1 = _$1`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`));
+const TouchRippleRoot = styled$1('span', {
+  name: 'MuiTouchRipple',
+  slot: 'Root'
+})({
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  position: 'absolute',
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: 'inherit'
+});
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+const TouchRippleRipple = styled$1(Ripple, {
+  name: 'MuiTouchRipple',
+  slot: 'Ripple'
+})(_t4$1 || (_t4$1 = _$1`
+  opacity: 0;
+  position: absolute;
+
+  &.${0} {
+    opacity: 0.3;
+    transform: scale(1);
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  &.${0} {
+    animation-duration: ${0}ms;
+  }
+
+  & .${0} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  & .${0} {
+    opacity: 0;
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  & .${0} {
+    position: absolute;
+    /* @noflip */
+    left: 0px;
+    top: 0;
+    animation-name: ${0};
+    animation-duration: 2500ms;
+    animation-timing-function: ${0};
+    animation-iteration-count: infinite;
+    animation-delay: 200ms;
+  }
+`), touchRippleClasses$1.rippleVisible, enterKeyframe, DURATION, ({
+  theme
+}) => theme.transitions.easing.easeInOut, touchRippleClasses$1.ripplePulsate, ({
+  theme
+}) => theme.transitions.duration.shorter, touchRippleClasses$1.child, touchRippleClasses$1.childLeaving, exitKeyframe, DURATION, ({
+  theme
+}) => theme.transitions.easing.easeInOut, touchRippleClasses$1.childPulsate, pulsateKeyframe, ({
+  theme
+}) => theme.transitions.easing.easeInOut);
+
+/**
+ * @ignore - internal component.
+ *
+ * TODO v5: Make private
+ */
+const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiTouchRipple'
+  });
+  const {
+      center: centerProp = false,
+      classes = {},
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const [ripples, setRipples] = React.useState([]);
+  const nextKey = React.useRef(0);
+  const rippleCallback = React.useRef(null);
+  React.useEffect(() => {
+    if (rippleCallback.current) {
+      rippleCallback.current();
+      rippleCallback.current = null;
+    }
+  }, [ripples]);
+
+  // Used to filter out mouse emulated events on mobile.
+  const ignoringMouseDown = React.useRef(false);
+  // We use a timer in order to only show the ripples for touch "click" like events.
+  // We don't want to display the ripple for touch scroll events.
+  const startTimer = useTimeout();
+
+  // This is the hook called once the previous timeout is ready.
+  const startTimerCommit = React.useRef(null);
+  const container = React.useRef(null);
+  const startCommit = React.useCallback(params => {
+    const {
+      pulsate,
+      rippleX,
+      rippleY,
+      rippleSize,
+      cb
+    } = params;
+    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRipple, {
+      classes: {
+        ripple: clsx(classes.ripple, touchRippleClasses$1.ripple),
+        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses$1.rippleVisible),
+        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses$1.ripplePulsate),
+        child: clsx(classes.child, touchRippleClasses$1.child),
+        childLeaving: clsx(classes.childLeaving, touchRippleClasses$1.childLeaving),
+        childPulsate: clsx(classes.childPulsate, touchRippleClasses$1.childPulsate)
+      },
+      timeout: DURATION,
+      pulsate: pulsate,
+      rippleX: rippleX,
+      rippleY: rippleY,
+      rippleSize: rippleSize
+    }, nextKey.current)]);
+    nextKey.current += 1;
+    rippleCallback.current = cb;
+  }, [classes]);
+  const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {
+    const {
+      pulsate = false,
+      center = centerProp || options.pulsate,
+      fakeElement = false // For test purposes
+    } = options;
+    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
+      ignoringMouseDown.current = false;
+      return;
+    }
+    if ((event == null ? void 0 : event.type) === 'touchstart') {
+      ignoringMouseDown.current = true;
+    }
+    const element = fakeElement ? null : container.current;
+    const rect = element ? element.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+
+    // Get the size of the ripple
+    let rippleX;
+    let rippleY;
+    let rippleSize;
+    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+      rippleX = Math.round(rect.width / 2);
+      rippleY = Math.round(rect.height / 2);
+    } else {
+      const {
+        clientX,
+        clientY
+      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
+      rippleX = Math.round(clientX - rect.left);
+      rippleY = Math.round(clientY - rect.top);
+    }
+    if (center) {
+      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
+
+      // For some reason the animation is broken on Mobile Chrome if the size is even.
+      if (rippleSize % 2 === 0) {
+        rippleSize += 1;
+      }
+    } else {
+      const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+      const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+      rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+    }
+
+    // Touche devices
+    if (event != null && event.touches) {
+      // check that this isn't another touchstart due to multitouch
+      // otherwise we will only clear a single timer when unmounting while two
+      // are running
+      if (startTimerCommit.current === null) {
+        // Prepare the ripple effect.
+        startTimerCommit.current = () => {
+          startCommit({
+            pulsate,
+            rippleX,
+            rippleY,
+            rippleSize,
+            cb
+          });
+        };
+        // Delay the execution of the ripple effect.
+        // We have to make a tradeoff with this delay value.
+        startTimer.start(DELAY_RIPPLE, () => {
+          if (startTimerCommit.current) {
+            startTimerCommit.current();
+            startTimerCommit.current = null;
+          }
+        });
+      }
+    } else {
+      startCommit({
+        pulsate,
+        rippleX,
+        rippleY,
+        rippleSize,
+        cb
+      });
+    }
+  }, [centerProp, startCommit, startTimer]);
+  const pulsate = React.useCallback(() => {
+    start({}, {
+      pulsate: true
+    });
+  }, [start]);
+  const stop = React.useCallback((event, cb) => {
+    startTimer.clear();
+
+    // The touch interaction occurs too quickly.
+    // We still want to show ripple effect.
+    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
+      startTimerCommit.current();
+      startTimerCommit.current = null;
+      startTimer.start(0, () => {
+        stop(event, cb);
+      });
+      return;
+    }
+    startTimerCommit.current = null;
+    setRipples(oldRipples => {
+      if (oldRipples.length > 0) {
+        return oldRipples.slice(1);
+      }
+      return oldRipples;
+    });
+    rippleCallback.current = cb;
+  }, [startTimer]);
+  React.useImperativeHandle(ref, () => ({
+    pulsate,
+    start,
+    stop
+  }), [pulsate, start, stop]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRoot, _extends$1({
+    className: clsx(touchRippleClasses$1.root, classes.root, className),
+    ref: container
+  }, other, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionGroup$1, {
+      component: null,
+      exit: true,
+      children: ripples
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : void 0;
+var TouchRipple$1 = TouchRipple;
+
+function getButtonBaseUtilityClass(slot) {
+  return generateUtilityClass('MuiButtonBase', slot);
+}
+const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
+var buttonBaseClasses$1 = buttonBaseClasses;
+
+const _excluded$3 = ["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$3 = ownerState => {
+  const {
+    disabled,
+    focusVisible,
+    focusVisibleClassName,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
+  };
+  const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);
+  if (focusVisible && focusVisibleClassName) {
+    composedClasses.root += ` ${focusVisibleClassName}`;
+  }
+  return composedClasses;
+};
+const ButtonBaseRoot = styled$1('button', {
+  name: 'MuiButtonBase',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+  boxSizing: 'border-box',
+  WebkitTapHighlightColor: 'transparent',
+  backgroundColor: 'transparent',
+  // Reset default value
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  border: 0,
+  margin: 0,
+  // Remove the margin in Safari
+  borderRadius: 0,
+  padding: 0,
+  // Remove the padding in Firefox
+  cursor: 'pointer',
+  userSelect: 'none',
+  verticalAlign: 'middle',
+  MozAppearance: 'none',
+  // Reset
+  WebkitAppearance: 'none',
+  // Reset
+  textDecoration: 'none',
+  // So we take precedent over the style of a native <a /> element.
+  color: 'inherit',
+  '&::-moz-focus-inner': {
+    borderStyle: 'none' // Remove Firefox dotted outline.
+  },
+  [`&.${buttonBaseClasses$1.disabled}`]: {
+    pointerEvents: 'none',
+    // Disable link interactions
+    cursor: 'default'
+  },
+  '@media print': {
+    colorAdjust: 'exact'
+  }
+});
+
+/**
+ * `ButtonBase` contains as few styles as possible.
+ * It aims to be a simple building block for creating a button.
+ * It contains a load of style reset and some focus/ripple logic.
+ */
+const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiButtonBase'
+  });
+  const {
+      action,
+      centerRipple = false,
+      children,
+      className,
+      component = 'button',
+      disabled = false,
+      disableRipple = false,
+      disableTouchRipple = false,
+      focusRipple = false,
+      LinkComponent = 'a',
+      onBlur,
+      onClick,
+      onContextMenu,
+      onDragLeave,
+      onFocus,
+      onFocusVisible,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseLeave,
+      onMouseUp,
+      onTouchEnd,
+      onTouchMove,
+      onTouchStart,
+      tabIndex = 0,
+      TouchRippleProps,
+      touchRippleRef,
+      type
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const buttonRef = React.useRef(null);
+  const rippleRef = React.useRef(null);
+  const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = useIsFocusVisible();
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  if (disabled && focusVisible) {
+    setFocusVisible(false);
+  }
+  React.useImperativeHandle(action, () => ({
+    focusVisible: () => {
+      setFocusVisible(true);
+      buttonRef.current.focus();
+    }
+  }), []);
+  const [mountedState, setMountedState] = React.useState(false);
+  React.useEffect(() => {
+    setMountedState(true);
+  }, []);
+  const enableTouchRipple = mountedState && !disableRipple && !disabled;
+  React.useEffect(() => {
+    if (focusVisible && focusRipple && !disableRipple && mountedState) {
+      rippleRef.current.pulsate();
+    }
+  }, [disableRipple, focusRipple, focusVisible, mountedState]);
+  function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
+    return useEventCallback(event => {
+      if (eventCallback) {
+        eventCallback(event);
+      }
+      const ignore = skipRippleAction;
+      if (!ignore && rippleRef.current) {
+        rippleRef.current[rippleAction](event);
+      }
+      return true;
+    });
+  }
+  const handleMouseDown = useRippleHandler('start', onMouseDown);
+  const handleContextMenu = useRippleHandler('stop', onContextMenu);
+  const handleDragLeave = useRippleHandler('stop', onDragLeave);
+  const handleMouseUp = useRippleHandler('stop', onMouseUp);
+  const handleMouseLeave = useRippleHandler('stop', event => {
+    if (focusVisible) {
+      event.preventDefault();
+    }
+    if (onMouseLeave) {
+      onMouseLeave(event);
+    }
+  });
+  const handleTouchStart = useRippleHandler('start', onTouchStart);
+  const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
+  const handleTouchMove = useRippleHandler('stop', onTouchMove);
+  const handleBlur = useRippleHandler('stop', event => {
+    handleBlurVisible(event);
+    if (isFocusVisibleRef.current === false) {
+      setFocusVisible(false);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  }, false);
+  const handleFocus = useEventCallback(event => {
+    // Fix for https://github.com/facebook/react/issues/7769
+    if (!buttonRef.current) {
+      buttonRef.current = event.currentTarget;
+    }
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current === true) {
+      setFocusVisible(true);
+      if (onFocusVisible) {
+        onFocusVisible(event);
+      }
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  });
+  const isNonNativeButton = () => {
+    const button = buttonRef.current;
+    return component && component !== 'button' && !(button.tagName === 'A' && button.href);
+  };
+
+  /**
+   * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
+   */
+  const keydownRef = React.useRef(false);
+  const handleKeyDown = useEventCallback(event => {
+    // Check if key is already down to avoid repeats being counted as multiple activations
+    if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
+      keydownRef.current = true;
+      rippleRef.current.stop(event, () => {
+        rippleRef.current.start(event);
+      });
+    }
+    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
+      event.preventDefault();
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+
+    // Keyboard accessibility for non interactive elements
+    if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(event);
+      }
+    }
+  });
+  const handleKeyUp = useEventCallback(event => {
+    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+    if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
+      keydownRef.current = false;
+      rippleRef.current.stop(event, () => {
+        rippleRef.current.pulsate(event);
+      });
+    }
+    if (onKeyUp) {
+      onKeyUp(event);
+    }
+
+    // Keyboard accessibility for non interactive elements
+    if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
+      onClick(event);
+    }
+  });
+  let ComponentProp = component;
+  if (ComponentProp === 'button' && (other.href || other.to)) {
+    ComponentProp = LinkComponent;
+  }
+  const buttonProps = {};
+  if (ComponentProp === 'button') {
+    buttonProps.type = type === undefined ? 'button' : type;
+    buttonProps.disabled = disabled;
+  } else {
+    if (!other.href && !other.to) {
+      buttonProps.role = 'button';
+    }
+    if (disabled) {
+      buttonProps['aria-disabled'] = disabled;
+    }
+  }
+  const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (enableTouchRipple && !rippleRef.current) {
+        console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
+      }
+    }, [enableTouchRipple]);
+  }
+  const ownerState = _extends$1({}, props, {
+    centerRipple,
+    component,
+    disabled,
+    disableRipple,
+    disableTouchRipple,
+    focusRipple,
+    tabIndex,
+    focusVisible
+  });
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$1({
+    as: ComponentProp,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    onBlur: handleBlur,
+    onClick: onClick,
+    onContextMenu: handleContextMenu,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onMouseDown: handleMouseDown,
+    onMouseLeave: handleMouseLeave,
+    onMouseUp: handleMouseUp,
+    onDragLeave: handleDragLeave,
+    onTouchEnd: handleTouchEnd,
+    onTouchMove: handleTouchMove,
+    onTouchStart: handleTouchStart,
+    ref: handleRef,
+    tabIndex: disabled ? -1 : tabIndex,
+    type: type
+  }, buttonProps, other, {
+    children: [children, enableTouchRipple ?
+    /*#__PURE__*/
+    /* TouchRipple is only needed client-side, x2 boost on the server. */
+    jsxRuntimeExports.jsx(TouchRipple$1, _extends$1({
+      ref: handleRippleRef,
+      center: centerRipple
+    }, TouchRippleProps)) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: refType$1,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: 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: elementTypeAcceptingRef$1,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: 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
+   */
+  href: PropTypes /* @typescript-to-proptypes-ignore */.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: 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]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string])
+} : void 0;
+var ButtonBase$1 = ButtonBase;
+
+function getButtonUtilityClass(slot) {
+  return generateUtilityClass('MuiButton', slot);
+}
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+var buttonClasses$1 = buttonClasses;
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
+}
+var ButtonGroupContext$1 = ButtonGroupContext;
+
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
+}
+var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
+
+const _excluded$2 = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const useUtilityClasses$2 = ownerState => {
+  const {
+    color,
+    disableElevation,
+    fullWidth,
+    size,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, `${variant}${capitalize$1(color)}`, `size${capitalize$1(size)}`, `${variant}Size${capitalize$1(size)}`, `color${capitalize$1(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
+    label: ['label'],
+    startIcon: ['icon', 'startIcon', `iconSize${capitalize$1(size)}`],
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize$1(size)}`]
+  };
+  const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
+  return _extends$1({}, classes, composedClasses);
+};
+const commonIconStyles = ownerState => _extends$1({}, ownerState.size === 'small' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 18
+  }
+}, ownerState.size === 'medium' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 20
+  }
+}, ownerState.size === 'large' && {
+  '& > *:nth-of-type(1)': {
+    fontSize: 22
+  }
+});
+const ButtonRoot = styled$1(ButtonBase$1, {
+  shouldForwardProp: prop => rootShouldForwardProp$2(prop) || prop === 'classes',
+  name: 'MuiButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize$1(ownerState.color)}`], styles[`size${capitalize$1(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize$1(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  var _theme$palette$getCon, _theme$palette;
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
+  return _extends$1({}, theme.typography.button, {
+    minWidth: 64,
+    padding: '6px 16px',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': _extends$1({
+      textDecoration: 'none',
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+      border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }, ownerState.variant === 'contained' && {
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+      boxShadow: (theme.vars || theme).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      }
+    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      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
+      }
+    }),
+    '&:active': _extends$1({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[8]
+    }),
+    [`&.${buttonClasses$1.focusVisible}`]: _extends$1({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[6]
+    }),
+    [`&.${buttonClasses$1.disabled}`]: _extends$1({
+      color: (theme.vars || theme).palette.action.disabled
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+    }, ownerState.variant === 'contained' && {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    })
+  }, ownerState.variant === 'text' && {
+    padding: '6px 8px'
+  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.variant === 'outlined' && {
+    padding: '5px 15px',
+    border: '1px solid currentColor'
+  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha_1(theme.palette[ownerState.color].main, 0.5)}`
+  }, ownerState.variant === 'contained' && {
+    color: theme.vars ?
+    // this is safe because grey does not change between default light/dark mode
+    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+    boxShadow: (theme.vars || theme).shadows[2]
+  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit',
+    borderColor: 'currentColor'
+  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+    padding: '4px 5px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+    padding: '8px 11px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    padding: '3px 9px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+    padding: '7px 21px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    padding: '4px 10px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+    padding: '8px 22px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.fullWidth && {
+    width: '100%'
+  });
+}, ({
+  ownerState
+}) => ownerState.disableElevation && {
+  boxShadow: 'none',
+  '&:hover': {
+    boxShadow: 'none'
+  },
+  [`&.${buttonClasses$1.focusVisible}`]: {
+    boxShadow: 'none'
+  },
+  '&:active': {
+    boxShadow: 'none'
+  },
+  [`&.${buttonClasses$1.disabled}`]: {
+    boxShadow: 'none'
+  }
+});
+const ButtonStartIcon = styled$1('span', {
+  name: 'MuiButton',
+  slot: 'StartIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.startIcon, styles[`iconSize${capitalize$1(ownerState.size)}`]];
+  }
+})(({
+  ownerState
+}) => _extends$1({
+  display: 'inherit',
+  marginRight: 8,
+  marginLeft: -4
+}, ownerState.size === 'small' && {
+  marginLeft: -2
+}, commonIconStyles(ownerState)));
+const ButtonEndIcon = styled$1('span', {
+  name: 'MuiButton',
+  slot: 'EndIcon',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.endIcon, styles[`iconSize${capitalize$1(ownerState.size)}`]];
+  }
+})(({
+  ownerState
+}) => _extends$1({
+  display: 'inherit',
+  marginRight: -4,
+  marginLeft: 8
+}, ownerState.size === 'small' && {
+  marginRight: -2
+}, commonIconStyles(ownerState)));
+const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(ButtonGroupContext$1);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext$1);
+  const resolvedProps = resolveProps(contextProps, inProps);
+  const props = useDefaultProps({
+    props: resolvedProps,
+    name: 'MuiButton'
+  });
+  const {
+      children,
+      color = 'primary',
+      component = 'button',
+      className,
+      disabled = false,
+      disableElevation = false,
+      disableFocusRipple = false,
+      endIcon: endIconProp,
+      focusVisibleClassName,
+      fullWidth = false,
+      size = 'medium',
+      startIcon: startIconProp,
+      type,
+      variant = 'text'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const ownerState = _extends$1({}, props, {
+    color,
+    component,
+    disabled,
+    disableElevation,
+    disableFocusRipple,
+    fullWidth,
+    size,
+    type,
+    variant
+  });
+  const classes = useUtilityClasses$2(ownerState);
+  const startIcon = startIconProp && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonStartIcon, {
+    className: classes.startIcon,
+    ownerState: ownerState,
+    children: startIconProp
+  });
+  const endIcon = endIconProp && /*#__PURE__*/jsxRuntimeExports.jsx(ButtonEndIcon, {
+    className: classes.endIcon,
+    ownerState: ownerState,
+    children: endIconProp
+  });
+  const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonRoot, _extends$1({
+    ownerState: ownerState,
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
+    component: component,
+    disabled: disabled,
+    focusRipple: !disableFocusRipple,
+    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+    ref: ref,
+    type: type
+  }, other, {
+    classes: classes,
+    children: [startIcon, children, endIcon]
+  }));
+});
+process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+var Button$1 = Button;
+
+function getCircularProgressUtilityClass(slot) {
+  return generateUtilityClass('MuiCircularProgress', slot);
+}
+generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+
+const _excluded$1 = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const SIZE = 44;
+const circularRotateKeyframe = keyframes(_t || (_t = _`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`));
+const circularDashKeyframe = keyframes(_t2 || (_t2 = _`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`));
+const useUtilityClasses$1 = ownerState => {
+  const {
+    classes,
+    variant,
+    color,
+    disableShrink
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, `color${capitalize$1(color)}`],
+    svg: ['svg'],
+    circle: ['circle', `circle${capitalize$1(variant)}`, disableShrink && 'circleDisableShrink']
+  };
+  return composeClasses(slots, getCircularProgressUtilityClass, classes);
+};
+const CircularProgressRoot = styled$1('span', {
+  name: 'MuiCircularProgress',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], styles[`color${capitalize$1(ownerState.color)}`]];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends$1({
+  display: 'inline-block'
+}, ownerState.variant === 'determinate' && {
+  transition: theme.transitions.create('transform')
+}, ownerState.color !== 'inherit' && {
+  color: (theme.vars || theme).palette[ownerState.color].main
+}), ({
+  ownerState
+}) => ownerState.variant === 'indeterminate' && css(_t3 || (_t3 = _`
+      animation: ${0} 1.4s linear infinite;
+    `), circularRotateKeyframe));
+const CircularProgressSVG = styled$1('svg', {
+  name: 'MuiCircularProgress',
+  slot: 'Svg',
+  overridesResolver: (props, styles) => styles.svg
+})({
+  display: 'block' // Keeps the progress centered
+});
+const CircularProgressCircle = styled$1('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Circle',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.circle, styles[`circle${capitalize$1(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends$1({
+  stroke: 'currentColor'
+}, ownerState.variant === 'determinate' && {
+  transition: theme.transitions.create('stroke-dashoffset')
+}, ownerState.variant === 'indeterminate' && {
+  // Some default value that looks fine waiting for the animation to kicks in.
+  strokeDasharray: '80px, 200px',
+  strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+}), ({
+  ownerState
+}) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css(_t4 || (_t4 = _`
+      animation: ${0} 1.4s ease-in-out infinite;
+    `), circularDashKeyframe));
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiCircularProgress'
+  });
+  const {
+      className,
+      color = 'primary',
+      disableShrink = false,
+      size = 40,
+      style,
+      thickness = 3.6,
+      value = 0,
+      variant = 'indeterminate'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends$1({}, props, {
+    color,
+    disableShrink,
+    size,
+    thickness,
+    value,
+    variant
+  });
+  const classes = useUtilityClasses$1(ownerState);
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+  if (variant === 'determinate') {
+    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps['aria-valuenow'] = Math.round(value);
+    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    rootStyle.transform = 'rotate(-90deg)';
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgressRoot, _extends$1({
+    className: clsx(classes.root, className),
+    style: _extends$1({
+      width: size,
+      height: size
+    }, rootStyle, style),
+    ownerState: ownerState,
+    ref: ref,
+    role: "progressbar"
+  }, rootProps, other, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgressSVG, {
+      className: classes.svg,
+      ownerState: ownerState,
+      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgressCircle, {
+        className: classes.circle,
+        style: circleStyle,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   * @default false
+   */
+  disableShrink: chainPropTypes(PropTypes.bool, props => {
+    if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
+      return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
+    }
+    return null;
+  }),
+  /**
+   * The size of the component.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * @default 40
+   */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @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 thickness of the circle.
+   * @default 3.6
+   */
+  thickness: PropTypes.number,
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
+   */
+  value: PropTypes.number,
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: PropTypes.oneOf(['determinate', 'indeterminate'])
+} : void 0;
+var CircularProgress$1 = CircularProgress;
+
+function getLoadingButtonUtilityClass(slot) {
+  return generateUtilityClass('MuiLoadingButton', slot);
+}
+const loadingButtonClasses = generateUtilityClasses('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);
+var loadingButtonClasses$1 = loadingButtonClasses;
+
+const _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"];
+const useUtilityClasses = ownerState => {
+  const {
+    loading,
+    loadingPosition,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', loading && 'loading'],
+    startIcon: [loading && `startIconLoading${capitalize$1(loadingPosition)}`],
+    endIcon: [loading && `endIconLoading${capitalize$1(loadingPosition)}`],
+    loadingIndicator: ['loadingIndicator', loading && `loadingIndicator${capitalize$1(loadingPosition)}`]
+  };
+  const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes);
+  return _extends$1({}, classes, composedClasses);
+};
+
+// TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
+const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
+const LoadingButtonRoot = styled$1(Button$1, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiLoadingButton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    return [styles.root, styles.startIconLoadingStart && {
+      [`& .${loadingButtonClasses$1.startIconLoadingStart}`]: styles.startIconLoadingStart
+    }, styles.endIconLoadingEnd && {
+      [`& .${loadingButtonClasses$1.endIconLoadingEnd}`]: styles.endIconLoadingEnd
+    }];
+  }
+})(({
+  ownerState,
+  theme
+}) => _extends$1({
+  [`& .${loadingButtonClasses$1.startIconLoadingStart}, & .${loadingButtonClasses$1.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0
+  }
+}, ownerState.loadingPosition === 'center' && {
+  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+    duration: theme.transitions.duration.short
+  }),
+  [`&.${loadingButtonClasses$1.loading}`]: {
+    color: 'transparent'
+  }
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  [`& .${loadingButtonClasses$1.startIconLoadingStart}, & .${loadingButtonClasses$1.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginRight: -8
+  }
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  [`& .${loadingButtonClasses$1.startIconLoadingStart}, & .${loadingButtonClasses$1.endIconLoadingEnd}`]: {
+    transition: theme.transitions.create(['opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    marginLeft: -8
+  }
+}));
+const LoadingButtonLoadingIndicator = styled$1('span', {
+  name: 'MuiLoadingButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.loadingIndicator, styles[`loadingIndicator${capitalize$1(ownerState.loadingPosition)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1({
+  position: 'absolute',
+  visibility: 'visible',
+  display: 'flex'
+}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
+  left: ownerState.size === 'small' ? 10 : 14
+}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
+  left: 6
+}, ownerState.loadingPosition === 'center' && {
+  left: '50%',
+  transform: 'translate(-50%)',
+  color: (theme.vars || theme).palette.action.disabled
+}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
+  right: ownerState.size === 'small' ? 10 : 14
+}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
+  right: 6
+}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
+  position: 'relative',
+  left: -10
+}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
+  position: 'relative',
+  right: -10
+}));
+const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
+  const contextProps = React.useContext(ButtonGroupContext$1);
+  const resolvedProps = resolveProps(contextProps, inProps);
+  const props = useDefaultProps({
+    props: resolvedProps,
+    name: 'MuiLoadingButton'
+  });
+  const {
+      children,
+      disabled = false,
+      id: idProp,
+      loading = false,
+      loadingIndicator: loadingIndicatorProp,
+      loadingPosition = 'center',
+      variant = 'text'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /*#__PURE__*/jsxRuntimeExports.jsx(CircularProgress$1, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
+  const ownerState = _extends$1({}, props, {
+    disabled,
+    loading,
+    loadingIndicator,
+    loadingPosition,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  const loadingButtonLoadingIndicator = loading ? /*#__PURE__*/jsxRuntimeExports.jsx(LoadingButtonLoadingIndicator, {
+    className: classes.loadingIndicator,
+    ownerState: ownerState,
+    children: loadingIndicator
+  }) : null;
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(LoadingButtonRoot, _extends$1({
+    disabled: disabled || loading,
+    id: id,
+    ref: ref
+  }, other, {
+    variant: variant,
+    classes: classes,
+    ownerState: ownerState,
+    children: [ownerState.loadingPosition === 'end' ? children : loadingButtonLoadingIndicator, ownerState.loadingPosition === 'end' ? loadingButtonLoadingIndicator : children]
+  }));
+});
+process.env.NODE_ENV !== "production" ? LoadingButton.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is shown and the button becomes disabled.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default we render a `CircularProgress` that is labelled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), props => {
+    if (props.loadingPosition === 'start' && !props.startIcon) {
+      return new Error(`MUI: The loadingPosition="start" should be used in combination with startIcon.`);
+    }
+    if (props.loadingPosition === 'end' && !props.endIcon) {
+      return new Error(`MUI: The loadingPosition="end" should be used in combination with endIcon.`);
+    }
+    return null;
+  }),
+  /**
+   * 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(['contained', 'outlined', 'text']), PropTypes.string])
+} : void 0;
+var LoadingButton$1 = LoadingButton;
+
+const PAGE_SIZE = 20;
+const TagsEditor = ({ value, options, onChange, onBack, onSave, isSaving, t }) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [limit, setLimit] = useState(PAGE_SIZE);
+    const safeOptions = useMemo(() => options ?? [], [options]);
+    const visibleOptions = useMemo(() => safeOptions.slice(0, limit), [safeOptions, limit]);
+    const handleSearchChange = (_, newInputValue) => {
+        setSearchValue(newInputValue ?? '');
+        setLimit(PAGE_SIZE);
+    };
+    const onListboxScroll = (event) => {
+        const element = event;
+        const nearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 24;
+        if (nearBottom)
+            setLimit((l) => l + PAGE_SIZE);
+    };
+    return (jsxRuntimeExports.jsxs(Box, { sx: { width: '100%' }, children: [jsxRuntimeExports.jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 2 }, children: [jsxRuntimeExports.jsx(IconButton, { size: "small", onClick: onBack, "aria-label": t('global.back'), disabled: isSaving, children: jsxRuntimeExports.jsx(default_1$1, { fontSize: "small" }) }), jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", children: t('tags') }), jsxRuntimeExports.jsx(Box, { sx: { flex: 1 } }), jsxRuntimeExports.jsx(LoadingButton$1, { variant: "contained", size: "small", startIcon: jsxRuntimeExports.jsx(default_1, {}), onClick: onSave, loading: isSaving, disabled: isSaving, children: t('global.save') })] }), jsxRuntimeExports.jsx(Autocomplete, { multiple: true, value: value, onChange: (_, newValue) => onChange(newValue), options: visibleOptions, filterOptions: (x) => x, inputValue: searchValue, onInputChange: handleSearchChange, getOptionLabel: (option) => option?.name ?? '', isOptionEqualToValue: (o, v) => String(o?.id) === String(v?.id), renderOption: (props, option) => (jsxRuntimeExports.jsx("li", { ...props, children: option.name ?? '' })), renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => (jsxRuntimeExports.jsx(Chip, { label: option.name ?? '', ...getTagProps({ index }) }))), size: "small", disablePortal: true, renderInput: (params) => jsxRuntimeExports.jsx(TextField, { ...params, size: "small" }), ListboxProps: {
+                    onScroll: onListboxScroll,
+                    sx: { maxHeight: 280, overflowY: 'auto' },
+                }, noOptionsText: t('global.noOptions'), sx: { width: '100%' } })] }));
+};
+
+const useImage = ({ baseUrl, spaceId, entityType, entityId, initialImageUrl, onEntityUpdated, }) => {
+    const [imageUrl, setImageUrl] = useState(initialImageUrl ?? '');
+    const [userTrii, setUserTrii] = useState(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const ref = useRef(null);
+    const canRequest = useMemo(() => Boolean(baseUrl && spaceId && entityType && entityId), [baseUrl, spaceId, entityType, entityId]);
+    function removeSasToken(url) {
+        return url.split('?sv=')[0];
+    }
+    function removeCacheId(url) {
+        return url.split('&cacheId=')[0];
+    }
+    function removeParams(url) {
+        let result = removeSasToken(url);
+        if (!result)
+            return '';
+        result = removeCacheId(result);
+        if (!result)
+            return '';
+        return result;
+    }
+    const ensureUserTrii = async () => {
+        if (!baseUrl || !spaceId)
+            return null;
+        const next = await fetchUserTrii({ baseUrl, spaceId });
+        setUserTrii(next);
+        return next;
+    };
+    const getImageURLWithAccessToken = async (rawUrl) => {
+        const nextUser = userTrii ?? (await ensureUserTrii());
+        const storageAzureSAS = nextUser?.storageAzureSAS;
+        const expireAt = storageAzureSAS?.expireAt;
+        const expiredAtDate = expireAt ? new Date(expireAt) : null;
+        let sas = storageAzureSAS?.sas ?? '';
+        if (!sas || (expiredAtDate && expiredAtDate < new Date())) {
+            const refreshed = await ensureUserTrii();
+            const refreshedSas = refreshed?.storageAzureSAS?.sas;
+            sas = refreshedSas ?? '';
+        }
+        if (!sas) {
+            return rawUrl;
+        }
+        const cacheId = `${Date.now()}`;
+        return `${rawUrl}${sas}&cacheId=${cacheId}`;
+    };
+    const setAccessImageUrl = async (url) => {
+        if (!url) {
+            setImageUrl('');
+            return;
+        }
+        const rawUrl = removeSasToken(url);
+        if (!rawUrl)
+            return;
+        const withSas = await getImageURLWithAccessToken(rawUrl);
+        setImageUrl(withSas);
+    };
+    const onChange = async (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        if (!canRequest)
+            return;
+        if (ref.current) {
+            ref.current.value = '';
+        }
+        setIsUploading(true);
+        try {
+            const uploadedUrl = await uploadAvatar({
+                baseUrl: baseUrl,
+                spaceId: spaceId,
+                contactId: entityId,
+                file,
+            });
+            const updated = await updateEntity({
+                baseUrl: baseUrl,
+                spaceId: spaceId,
+                entityType: entityType,
+                entityId: entityId,
+                body: { imageUrl: uploadedUrl },
+            });
+            onEntityUpdated?.(updated);
+            await setAccessImageUrl(uploadedUrl);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const uploadImage = () => {
+        ref.current?.click();
+    };
+    const deleteImage = async () => {
+        if (!canRequest)
+            return;
+        if (isDeleting)
+            return;
+        setIsDeleting(true);
+        try {
+            await deleteEntityPhoto({
+                baseUrl: baseUrl,
+                spaceId: spaceId,
+                entityType: entityType,
+                entityId: entityId,
+            });
+            onEntityUpdated?.({ imageUrl: undefined });
+            setImageUrl('');
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    };
+    useEffect(() => {
+        if (!initialImageUrl) {
+            setImageUrl('');
+            return;
+        }
+        void setAccessImageUrl(initialImageUrl);
+    }, [initialImageUrl]);
+    return {
+        inputAtributes: {
+            onChange,
+            ref,
+            type: 'file',
+            accept: 'image/*',
+        },
+        action: {
+            uploadImage,
+            deleteImage,
+        },
+        imageUrl,
+        removeParams,
+        isUploading,
+        isDeleting,
+    };
+};
+
+const EditContactModal = ({ open, onClose, baseUrl, spaceId, contactId, sx, t, }) => {
+    const { state, selectors, actions } = useEditContactModalController({
+        open,
+        baseUrl,
+        spaceId,
+        contactId,
+    });
+    const [view, setView] = useState("main");
+    const [draftLabels, setDraftLabels] = useState([]);
+    const [tagsEditorInitialized, setTagsEditorInitialized] = useState(false);
+    const [isSavingTags, setIsSavingTags] = useState(false);
+    const image = useImage({
+        baseUrl,
+        spaceId,
+        entityType: selectors.contactType === 'business' || selectors.contactType === 'contact'
+            ? selectors.contactType
+            : undefined,
+        entityId: state.contactData ? String(state.contactData.id) : undefined,
+        initialImageUrl: state.contactData?.imageUrl,
+        onEntityUpdated: (entity) => {
+            if (!entity || typeof entity !== 'object')
+                return;
+            if (!state.contactData)
+                return;
+            actions.setContactData({ ...state.contactData, ...entity });
+        },
+    });
+    useEffect(() => {
+        if (!open) {
+            setView('main');
+            setDraftLabels([]);
+            setTagsEditorInitialized(false);
+            setIsSavingTags(false);
+        }
+    }, [open]);
+    const handleSaveTags = async () => {
+        if (isSavingTags)
+            return;
+        if (!baseUrl)
+            return;
+        if (!spaceId)
+            return;
+        if (!state.contactData)
+            return;
+        if (selectors.contactType !== 'business' && selectors.contactType !== 'contact')
+            return;
+        const tags = draftLabels
+            .filter((l) => l?.id && l?.name)
+            .map((l) => ({ id: String(l.id), name: String(l.name) }));
+        setIsSavingTags(true);
+        try {
+            await updateEntity({
+                baseUrl,
+                spaceId,
+                entityType: selectors.contactType,
+                entityId: String(state.contactData.id),
+                body: { tags },
+            });
+            actions.setContactData({ ...state.contactData, tags });
+            setView('main');
+        }
+        finally {
+            setIsSavingTags(false);
+        }
+    };
+    useEffect(() => {
+        if (view !== 'tags') {
+            setTagsEditorInitialized(false);
+            return;
+        }
+        if (tagsEditorInitialized)
+            return;
+        if (!selectors.labels.length)
+            return;
+        const selectedTagIds = new Set(selectors.tags.map((t) => String(t.id)));
+        const initialSelectedLabels = selectors.labels.filter((l) => selectedTagIds.has(String(l?.id)));
+        setDraftLabels(initialSelectedLabels);
+        setTagsEditorInitialized(true);
+    }, [view, tagsEditorInitialized, selectors.labels, selectors.tags]);
     const handleClose = (event, reason) => {
         if (reason === 'escapeKeyDown') {
             const maybeEvent = event;
@@ -15055,7 +17726,9 @@ const EditContactModal = ({ open, onClose, baseUrl, contactId, sx,
                         justifyContent: 'center',
                         alignItems: 'center',
                         minHeight: 180,
-                    }, children: jsxRuntimeExports.jsx(CircularProgress, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Header, { imgUrl: state.contactData.imageUrl, displayName: selectors.displayName }), jsxRuntimeExports.jsx(Box, { sx: { minHeight: 120 } })] })) : null }) }) }));
+                    }, children: jsxRuntimeExports.jsx(CircularProgress$2, {}) })) : state.error ? (jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: "Failed to load contact" })) : state.contactData ? (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(Box, { sx: { position: 'relative', overflow: 'hidden' }, children: [jsxRuntimeExports.jsx(Slide, { direction: "right", in: view === 'main', mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsxs(Box, { children: [jsxRuntimeExports.jsx(Header, { imgUrl: image.imageUrl, displayName: selectors.displayName, tags: selectors.tags, t: t, onEditTags: () => {
+                                                setView('tags');
+                                            }, onUploadPhoto: image.action.uploadImage, onPhotoFileChange: image.inputAtributes.onChange, photoInputRef: image.inputAtributes.ref, isUploadingPhoto: image.isUploading, onDeletePhoto: image.action.deleteImage, isDeletingPhoto: image.isDeleting }), jsxRuntimeExports.jsx(Box, { sx: { minHeight: 120 } })] }) }), jsxRuntimeExports.jsx(Slide, { direction: "left", in: view === 'tags', mountOnEnter: true, unmountOnExit: true, children: jsxRuntimeExports.jsx(Box, { children: jsxRuntimeExports.jsx(TagsEditor, { value: draftLabels, options: selectors.labels, onChange: setDraftLabels, onBack: () => setView('main'), onSave: handleSaveTags, isSaving: isSavingTags, t: t }) }) })] }) })) : null }) }) }));
 };
 
 export { ContactInfoPopup, EditContactModal };