@connectif/ui-components 1.0.8 → 2.0.0

package/dist/index.js

@@ -54,7 +54,7 @@ var require_react_is_development = __commonJS({
         var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for("react.fundamental") : 60117;
         var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for("react.responder") : 60118;
         var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for("react.scope") : 60119;
-        function isValidElementType(type) {
+        function isValidElementType2(type) {
           return typeof type === "string" || typeof type === "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
           type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === "object" && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
         }
@@ -97,7 +97,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment33 = REACT_FRAGMENT_TYPE;
+        var Fragment34 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -156,7 +156,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment33;
+        exports.Fragment = Fragment34;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -176,7 +176,7 @@ var require_react_is_development = __commonJS({
         exports.isProfiler = isProfiler;
         exports.isStrictMode = isStrictMode;
         exports.isSuspense = isSuspense;
-        exports.isValidElementType = isValidElementType;
+        exports.isValidElementType = isValidElementType2;
         exports.typeOf = typeOf;
       })();
     }
@@ -373,7 +373,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement3, throwOnDirectAccess) {
+    module.exports = function(isValidElement4, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -501,7 +501,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement3(propValue)) {
+          if (!isValidElement4(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -689,7 +689,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement3(propValue)) {
+            if (propValue === null || isValidElement4(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -5080,29 +5080,301 @@ import {
   Typography as MuiTypography
 } from "@mui/material";
 
-// node_modules/@mui/styled-engine/index.js
+// node_modules/@mui/styled-engine/esm/index.js
 import emStyled from "@emotion/styled";
+
+// node_modules/@emotion/hash/dist/emotion-hash.esm.js
+function murmur2(str) {
+  var h = 0;
+  var k, i = 0, len = str.length;
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+    k ^= /* k >>> r: */
+    k >>> 24;
+    h = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
+    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 255) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 255) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 255;
+      h = /* Math.imul(h, m): */
+      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  h ^= h >>> 13;
+  h = /* Math.imul(h, m): */
+  (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+// node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  scale: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+// node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+// node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
+var isDevelopment = false;
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var isCustomProperty = function isCustomProperty2(property) {
+  return property.charCodeAt(1) === 45;
+};
+var isProcessableValue = function isProcessableValue2(value) {
+  return value != null && typeof value !== "boolean";
+};
+var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
+});
+var processStyleValue = function processStyleValue2(key, value) {
+  switch (key) {
+    case "animation":
+    case "animationName": {
+      if (typeof value === "string") {
+        return value.replace(animationRegex, function(match, p1, p2) {
+          cursor = {
+            name: p1,
+            styles: p2,
+            next: cursor
+          };
+          return p1;
+        });
+      }
+    }
+  }
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
+    return value + "px";
+  }
+  return value;
+};
+var noComponentSelectorMessage = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return "";
+  }
+  var componentSelector = interpolation;
+  if (componentSelector.__emotion_styles !== void 0) {
+    return componentSelector;
+  }
+  switch (typeof interpolation) {
+    case "boolean": {
+      return "";
+    }
+    case "object": {
+      var keyframes2 = interpolation;
+      if (keyframes2.anim === 1) {
+        cursor = {
+          name: keyframes2.name,
+          styles: keyframes2.styles,
+          next: cursor
+        };
+        return keyframes2.name;
+      }
+      var serializedStyles = interpolation;
+      if (serializedStyles.styles !== void 0) {
+        var next = serializedStyles.next;
+        if (next !== void 0) {
+          while (next !== void 0) {
+            cursor = {
+              name: next.name,
+              styles: next.styles,
+              next: cursor
+            };
+            next = next.next;
+          }
+        }
+        var styles3 = serializedStyles.styles + ";";
+        return styles3;
+      }
+      return createStringFromObject(mergedProps, registered, interpolation);
+    }
+    case "function": {
+      if (mergedProps !== void 0) {
+        var previousCursor = cursor;
+        var result = interpolation(mergedProps);
+        cursor = previousCursor;
+        return handleInterpolation(mergedProps, registered, result);
+      }
+      break;
+    }
+  }
+  var asString = interpolation;
+  if (registered == null) {
+    return asString;
+  }
+  var cached = registered[asString];
+  return cached !== void 0 ? cached : asString;
+}
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = "";
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var key in obj) {
+      var value = obj[key];
+      if (typeof value !== "object") {
+        var asString = value;
+        if (registered != null && registered[asString] !== void 0) {
+          string += key + "{" + registered[asString] + "}";
+        } else if (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+        if (key === "NO_COMPONENT_SELECTOR" && isDevelopment) {
+          throw new Error(noComponentSelectorMessage);
+        }
+        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+          switch (key) {
+            case "animation":
+            case "animationName": {
+              string += processStyleName(key) + ":" + interpolated + ";";
+              break;
+            }
+            default: {
+              string += key + "{" + interpolated + "}";
+            }
+          }
+        }
+      }
+    }
+  }
+  return string;
+}
+var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g;
+var cursor;
+function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
+    return args[0];
+  }
+  var stringMode = true;
+  var styles3 = "";
+  cursor = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles3 += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+    styles3 += asTemplateStringsArr[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles3 += handleInterpolation(mergedProps, registered, args[i]);
+    if (stringMode) {
+      var templateStringsArr = strings;
+      styles3 += templateStringsArr[i];
+    }
+  }
+  labelPattern.lastIndex = 0;
+  var identifierName = "";
+  var match;
+  while ((match = labelPattern.exec(styles3)) !== null) {
+    identifierName += "-" + match[1];
+  }
+  var name = murmur2(styles3) + identifierName;
+  return {
+    name,
+    styles: styles3,
+    next: cursor
+  };
+}
+
+// node_modules/@mui/styled-engine/esm/index.js
 import { ThemeContext, keyframes, css } from "@emotion/react";
 function styled2(tag, options) {
   const stylesFactory = emStyled(tag, options);
   if (true) {
-    return (...styles2) => {
+    return (...styles3) => {
       const component = typeof tag === "string" ? `"${tag}"` : "component";
-      if (styles2.length === 0) {
+      if (styles3.length === 0) {
         console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n"));
-      } else if (styles2.some((style3) => style3 === void 0)) {
+      } else if (styles3.some((style3) => style3 === void 0)) {
         console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
       }
-      return stylesFactory(...styles2);
+      return stylesFactory(...styles3);
     };
   }
   return stylesFactory;
 }
-var internal_processStyles = (tag, processor) => {
+function internal_mutateStyles(tag, processor) {
   if (Array.isArray(tag.__emotion_styles)) {
     tag.__emotion_styles = processor(tag.__emotion_styles);
   }
-};
+}
+var wrapper = [];
+function internal_serializeStyles(styles3) {
+  wrapper[0] = styles3;
+  return serializeStyles(wrapper);
+}
 
 // src/components/typography/Typography.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -5155,7 +5427,7 @@ var Typography = React4.forwardRef(function Typography2({
 var Typography_default = Typography;
 
 // src/components/tooltip/Tooltip.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
 var getTooltipVariantStyles = (placement) => ({
   white: {
     tooltip: {
@@ -5209,7 +5481,7 @@ var getTooltipVariantStyles = (placement) => ({
     }
   }
 });
-var Tooltip = ({
+var Tooltip = React5.forwardRef(function Tooltip2({
   children,
   title,
   placement = "bottom",
@@ -5222,7 +5494,7 @@ var Tooltip = ({
   popperClass,
   zIndex,
   ...rest
-}) => {
+}, ref) {
   React5.useEffect(() => {
     const handleMutations = (mutationsList) => {
       for (const mutation of mutationsList) {
@@ -5259,9 +5531,10 @@ var Tooltip = ({
       observer.disconnect();
     };
   }, [placement, variant]);
-  return !title ? children : /* @__PURE__ */ jsx6(
+  return !title ? /* @__PURE__ */ jsx6(Fragment, { children }) : /* @__PURE__ */ jsx6(
     MuiTooltip,
     {
+      ref,
       arrow: enableArrow,
       componentsProps: variant !== "default" ? getTooltipVariantStyles(placement)[variant] : void 0,
       title: typeof title === "string" ? /* @__PURE__ */ jsx6(Typography_default, { color: "inherit", variant: textVariant, children: title }) : title,
@@ -5281,10 +5554,10 @@ var Tooltip = ({
         ...popperClass && { className: popperClass }
       },
       ...rest,
-      children: allowDisabled ? /* @__PURE__ */ jsx6("span", { children }) : children
+      children: allowDisabled ? /* @__PURE__ */ jsx6("span", { children: React5.isValidElement(children) ? children : null }) : children
     }
   );
-};
+});
 var Tooltip_default = Tooltip;
 
 // src/utils/ResizeObserverUtils.ts
@@ -5371,7 +5644,7 @@ var ListItemText = ({
 var ListItemText_default = ListItemText;
 
 // src/components/list/BaseListItem.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var BaseListItem = ({
   baseSx,
   color: color2 = "default",
@@ -5430,7 +5703,7 @@ var BaseListItem = ({
             width: "100%",
             overflow: "auto"
           },
-          children: children ? children : /* @__PURE__ */ jsxs2(Fragment, { children: [
+          children: children ? children : /* @__PURE__ */ jsxs2(Fragment2, { children: [
             /* @__PURE__ */ jsx9(
               ListItemText_default,
               {
@@ -6195,7 +6468,18 @@ import {
   default as MuiGrid
 } from "@mui/material/Grid";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var Grid = (props) => /* @__PURE__ */ jsx24(MuiGrid, { ...props });
+var Grid = ({ xs, md, lg, xl, ...rest }) => /* @__PURE__ */ jsx24(
+  MuiGrid,
+  {
+    size: {
+      xs,
+      md,
+      lg,
+      xl
+    },
+    ...rest
+  }
+);
 var Grid_default = Grid;
 
 // src/components/layout/SidePanel.tsx
@@ -6291,7 +6575,7 @@ import {
 } from "@mui/material";
 
 // src/components/typography/TextMarker.tsx
-import { Fragment as Fragment2, jsx as jsx28 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28 } from "react/jsx-runtime";
 var TextMarker = ({
   backgroundColor: backgroundColor2 = primaryOpacity32,
   searchText,
@@ -6301,7 +6585,7 @@ var TextMarker = ({
   children
 }) => {
   if (typeof children !== "string" || !searchText || !children) {
-    return /* @__PURE__ */ jsx28(Fragment2, { children });
+    return /* @__PURE__ */ jsx28(Fragment3, { children });
   }
   let tokens;
   if (multiSearchCharSeparator) {
@@ -6311,7 +6595,7 @@ var TextMarker = ({
   }
   tokens = tokens.map((s) => s.trim()).filter((s) => !!s);
   if (tokens.length === 0) {
-    return /* @__PURE__ */ jsx28(Fragment2, { children });
+    return /* @__PURE__ */ jsx28(Fragment3, { children });
   }
   const getMatches = (token) => Array.from(
     children.matchAll(
@@ -6329,7 +6613,7 @@ var TextMarker = ({
     tokenIndex++;
   }
   if (matches.length === 0) {
-    return /* @__PURE__ */ jsx28(Fragment2, { children });
+    return /* @__PURE__ */ jsx28(Fragment3, { children });
   }
   const result = [children.substring(0, matches[0].index)];
   matches.forEach((match, index) => {
@@ -6350,7 +6634,7 @@ var TextMarker = ({
       );
     }
   });
-  return /* @__PURE__ */ jsx28(Fragment2, { children: result });
+  return /* @__PURE__ */ jsx28(Fragment3, { children: result });
 };
 function escapeRegExp(source) {
   return source.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -6478,7 +6762,9 @@ var Stepper = React13.forwardRef(function Stepper2({ activeStep, orientation = "
         /* @__PURE__ */ jsx29(
           MuiStepLabel,
           {
-            StepIconComponent: CustomStepIcon,
+            slots: {
+              stepIcon: CustomStepIcon
+            },
             sx: {
               padding: "4px 0px"
             },
@@ -6506,29 +6792,8 @@ __export(Animations_exports, {
   littleBeating: () => littleBeating
 });
 
-// node_modules/@babel/runtime/helpers/esm/extends.js
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n[r2] = t[r2]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-// node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
-function _objectWithoutPropertiesLoose(r2, e) {
-  if (null == r2) return {};
-  var t = {};
-  for (var n in r2) if ({}.hasOwnProperty.call(r2, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r2[n];
-  }
-  return t;
-}
-
 // node_modules/@mui/utils/esm/deepmerge/deepmerge.js
+var import_react_is = __toESM(require_react_is2(), 1);
 import * as React14 from "react";
 function isPlainObject(item) {
   if (typeof item !== "object" || item === null) {
@@ -6538,7 +6803,7 @@ function isPlainObject(item) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone(source) {
-  if (/* @__PURE__ */ React14.isValidElement(source) || !isPlainObject(source)) {
+  if (/* @__PURE__ */ React14.isValidElement(source) || (0, import_react_is.isValidElementType)(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
@@ -6550,10 +6815,12 @@ function deepClone(source) {
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends({}, target) : target;
+  const output = options.clone ? {
+    ...target
+  } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach((key) => {
-      if (/* @__PURE__ */ React14.isValidElement(source[key])) {
+      if (/* @__PURE__ */ React14.isValidElement(source[key]) || (0, import_react_is.isValidElementType)(source[key])) {
         output[key] = source[key];
       } else if (isPlainObject(source[key]) && // Avoid prototype pollution
       Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
@@ -6568,8 +6835,7 @@ function deepmerge(target, source, options = {
   return output;
 }
 
-// node_modules/@mui/system/esm/createTheme/createBreakpoints.js
-var _excluded = ["values", "unit", "step"];
+// node_modules/@mui/system/esm/createBreakpoints/createBreakpoints.js
 var sortBreakpointsValues = (values2) => {
   const breakpointsAsArray = Object.keys(values2).map((key) => ({
     key,
@@ -6577,9 +6843,10 @@ var sortBreakpointsValues = (values2) => {
   })) || [];
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return {
+      ...acc,
       [obj.key]: obj.val
-    });
+    };
   }, {});
 };
 function createBreakpoints(breakpoints2) {
@@ -6599,8 +6866,9 @@ function createBreakpoints(breakpoints2) {
       // large screen
     },
     unit = "px",
-    step = 5
-  } = breakpoints2, other = _objectWithoutPropertiesLoose(breakpoints2, _excluded);
+    step = 5,
+    ...other
+  } = breakpoints2;
   const sortedValues = sortBreakpointsValues(values2);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6631,7 +6899,7 @@ function createBreakpoints(breakpoints2) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace("@media", "@media not all and");
   }
-  return _extends({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -6639,8 +6907,73 @@ function createBreakpoints(breakpoints2) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
+}
+
+// node_modules/@mui/system/esm/cssContainerQueries/cssContainerQueries.js
+function sortContainerQueries(theme2, css2) {
+  if (!theme2.containerQueries) {
+    return css2;
+  }
+  const sorted = Object.keys(css2).filter((key) => key.startsWith("@container")).sort((a, b) => {
+    const regex = /min-width:\s*([0-9.]+)/;
+    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
+  });
+  if (!sorted.length) {
+    return css2;
+  }
+  return sorted.reduce((acc, key) => {
+    const value = css2[key];
+    delete acc[key];
+    acc[key] = value;
+    return acc;
+  }, {
+    ...css2
+  });
+}
+function isCqShorthand(breakpointKeys, value) {
+  return value === "@" || value.startsWith("@") && (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+}
+function getContainerQuery(theme2, shorthand) {
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
+  if (!matches) {
+    if (true) {
+      throw new Error(true ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage(18, `(${shorthand})`));
+    }
+    return null;
+  }
+  const [, containerQuery, containerName] = matches;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
+  return theme2.containerQueries(containerName).up(value);
+}
+function cssContainerQueries(themeInput) {
+  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace("@media", name ? `@container ${name}` : "@container");
+  function attachCq(node2, name) {
+    node2.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
+    node2.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
+    node2.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
+    node2.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
+    node2.not = (...args) => {
+      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
+      if (result.includes("not all and")) {
+        return result.replace("not all and ", "").replace("min-width:", "width<").replace("max-width:", "width>").replace("and", "or");
+      }
+      return result;
+    };
+  }
+  const node = {};
+  const containerQueries = (name) => {
+    attachCq(node, name);
+    return node;
+  };
+  attachCq(containerQueries);
+  return {
+    ...themeInput,
+    containerQueries
+  };
 }
 
 // node_modules/@mui/system/esm/createTheme/shape.js
@@ -6649,12 +6982,12 @@ var shape = {
 };
 var shape_default = shape;
 
-// node_modules/@mui/system/esm/responsivePropType.js
-var import_prop_types = __toESM(require_prop_types());
+// node_modules/@mui/system/esm/responsivePropType/responsivePropType.js
+var import_prop_types = __toESM(require_prop_types(), 1);
 var responsivePropType = true ? import_prop_types.default.oneOfType([import_prop_types.default.number, import_prop_types.default.string, import_prop_types.default.object, import_prop_types.default.array]) : {};
 var responsivePropType_default = responsivePropType;
 
-// node_modules/@mui/system/esm/merge.js
+// node_modules/@mui/system/esm/merge/merge.js
 function merge(acc, item) {
   if (!item) {
     return acc;
@@ -6666,7 +6999,7 @@ function merge(acc, item) {
 }
 var merge_default = merge;
 
-// node_modules/@mui/system/esm/breakpoints.js
+// node_modules/@mui/system/esm/breakpoints/breakpoints.js
 var values = {
   xs: 0,
   // phone
@@ -6685,6 +7018,17 @@ var defaultBreakpoints = {
   keys: ["xs", "sm", "md", "lg", "xl"],
   up: (key) => `@media (min-width:${values[key]}px)`
 };
+var defaultContainerQueries = {
+  containerQueries: (containerName) => ({
+    up: (key) => {
+      let result = typeof key === "number" ? key : values[key] || key;
+      if (typeof result === "number") {
+        result = `${result}px`;
+      }
+      return containerName ? `@container ${containerName} (min-width:${result})` : `@container (min-width:${result})`;
+    }
+  })
+};
 function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme2 = props.theme || {};
   if (Array.isArray(propValue)) {
@@ -6697,7 +7041,12 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   if (typeof propValue === "object") {
     const themeBreakpoints = theme2.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
-      if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+        const containerKey = getContainerQuery(theme2.containerQueries ? theme2 : defaultContainerQueries, breakpoint);
+        if (containerKey) {
+          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+        }
+      } else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {
@@ -6711,8 +7060,7 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   return output;
 }
 function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
     return acc;
@@ -6733,12 +7081,12 @@ function removeUnusedBreakpoints(breakpointKeys, style3) {
 // node_modules/@mui/utils/esm/capitalize/capitalize.js
 function capitalize(string) {
   if (typeof string !== "string") {
-    throw new Error(true ? `MUI: \`capitalize(string)\` expects a string argument.` : formatMuiErrorMessage(7));
+    throw new Error(true ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-// node_modules/@mui/system/esm/style.js
+// node_modules/@mui/system/esm/style/style.js
 function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== "string") {
     return null;
@@ -6806,8 +7154,8 @@ function style(options) {
 }
 var style_default = style;
 
-// node_modules/@mui/system/esm/memoize.js
-function memoize(fn) {
+// node_modules/@mui/system/esm/memoize/memoize.js
+function memoize2(fn) {
   const cache = {};
   return (arg) => {
     if (cache[arg] === void 0) {
@@ -6817,7 +7165,7 @@ function memoize(fn) {
   };
 }
 
-// node_modules/@mui/system/esm/spacing.js
+// node_modules/@mui/system/esm/spacing/spacing.js
 var properties = {
   m: "margin",
   p: "padding"
@@ -6836,7 +7184,7 @@ var aliases = {
   paddingX: "px",
   paddingY: "py"
 };
-var getCssProperties = memoize((prop) => {
+var getCssProperties = memoize2((prop) => {
   if (prop.length > 2) {
     if (aliases[prop]) {
       prop = aliases[prop];
@@ -6853,26 +7201,35 @@ var marginKeys = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop"
 var paddingKeys = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
 var spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme2, themeKey, defaultValue, propName) {
-  var _getPath;
-  const themeSpacing = (_getPath = getPath(theme2, themeKey, false)) != null ? _getPath : defaultValue;
-  if (typeof themeSpacing === "number") {
-    return (abs) => {
-      if (typeof abs === "string") {
-        return abs;
+  const themeSpacing = getPath(theme2, themeKey, true) ?? defaultValue;
+  if (typeof themeSpacing === "number" || typeof themeSpacing === "string") {
+    return (val) => {
+      if (typeof val === "string") {
+        return val;
       }
       if (true) {
-        if (typeof abs !== "number") {
-          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
+        if (typeof val !== "number") {
+          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${val}.`);
+        }
+      }
+      if (typeof themeSpacing === "string") {
+        if (themeSpacing.startsWith("var(") && val === 0) {
+          return 0;
+        }
+        if (themeSpacing.startsWith("var(") && val === 1) {
+          return themeSpacing;
         }
+        return `calc(${val} * ${themeSpacing})`;
       }
-      return themeSpacing * abs;
+      return themeSpacing * val;
     };
   }
   if (Array.isArray(themeSpacing)) {
-    return (abs) => {
-      if (typeof abs === "string") {
-        return abs;
+    return (val) => {
+      if (typeof val === "string") {
+        return val;
       }
+      const abs = Math.abs(val);
       if (true) {
         if (!Number.isInteger(abs)) {
           console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join("\n"));
@@ -6880,7 +7237,17 @@ function createUnaryUnit(theme2, themeKey, defaultValue, propName) {
           console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join("\n"));
         }
       }
-      return themeSpacing[abs];
+      const transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
+      }
+      if (typeof transformed === "number") {
+        return -transformed;
+      }
+      if (typeof transformed === "string" && transformed.startsWith("var(")) {
+        return `calc(-1 * ${transformed})`;
+      }
+      return `-${transformed}`;
     };
   }
   if (typeof themeSpacing === "function") {
@@ -6898,15 +7265,7 @@ function getValue(transformer, propValue) {
   if (typeof propValue === "string" || propValue == null) {
     return propValue;
   }
-  const abs = Math.abs(propValue);
-  const transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === "number") {
-    return -transformed;
-  }
-  return `-${transformed}`;
+  return transformer(propValue);
 }
 function getStyleFromPropValue(cssProperties, transformer) {
   return (propValue) => cssProperties.reduce((acc, cssProperty) => {
@@ -6915,7 +7274,7 @@ function getStyleFromPropValue(cssProperties, transformer) {
   }, {});
 }
 function resolveCssProperty(props, keys, prop, transformer) {
-  if (keys.indexOf(prop) === -1) {
+  if (!keys.includes(prop)) {
     return null;
   }
   const cssProperties = getCssProperties(prop);
@@ -6953,13 +7312,12 @@ spacing.propTypes = true ? spacingKeys.reduce((obj, key) => {
 spacing.filterProps = spacingKeys;
 
 // node_modules/@mui/system/esm/createTheme/createSpacing.js
-function createSpacing(spacingInput = 8) {
+function createSpacing(spacingInput = 8, transform = createUnarySpacing({
+  spacing: spacingInput
+})) {
   if (spacingInput.mui) {
     return spacingInput;
   }
-  const transform = createUnarySpacing({
-    spacing: spacingInput
-  });
   const spacing2 = (...argsInput) => {
     if (true) {
       if (!(argsInput.length <= 4)) {
@@ -6976,9 +7334,9 @@ function createSpacing(spacingInput = 8) {
   return spacing2;
 }
 
-// node_modules/@mui/system/esm/compose.js
-function compose(...styles2) {
-  const handlers = styles2.reduce((acc, style3) => {
+// node_modules/@mui/system/esm/compose/compose.js
+function compose(...styles3) {
+  const handlers = styles3.reduce((acc, style3) => {
     style3.filterProps.forEach((prop) => {
       acc[prop] = style3;
     });
@@ -6992,13 +7350,13 @@ function compose(...styles2) {
       return acc;
     }, {});
   };
-  fn.propTypes = true ? styles2.reduce((acc, style3) => Object.assign(acc, style3.propTypes), {}) : {};
-  fn.filterProps = styles2.reduce((acc, style3) => acc.concat(style3.filterProps), []);
+  fn.propTypes = true ? styles3.reduce((acc, style3) => Object.assign(acc, style3.propTypes), {}) : {};
+  fn.filterProps = styles3.reduce((acc, style3) => acc.concat(style3.filterProps), []);
   return fn;
 }
 var compose_default = compose;
 
-// node_modules/@mui/system/esm/borders.js
+// node_modules/@mui/system/esm/borders/borders.js
 function borderTransform(value) {
   if (typeof value !== "number") {
     return value;
@@ -7040,7 +7398,7 @@ borderRadius.propTypes = true ? {
 borderRadius.filterProps = ["borderRadius"];
 var borders = compose_default(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
 
-// node_modules/@mui/system/esm/cssGrid.js
+// node_modules/@mui/system/esm/cssGrid/cssGrid.js
 var gap = (props) => {
   if (props.gap !== void 0 && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, "spacing", 8, "gap");
@@ -7112,7 +7470,7 @@ var gridArea = style_default({
 });
 var grid = compose_default(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
 
-// node_modules/@mui/system/esm/palette.js
+// node_modules/@mui/system/esm/palette/palette.js
 function paletteTransform(value, userValue) {
   if (userValue === "grey") {
     return userValue;
@@ -7137,7 +7495,7 @@ var backgroundColor = style_default({
 });
 var palette = compose_default(color, bgcolor, backgroundColor);
 
-// node_modules/@mui/system/esm/sizing.js
+// node_modules/@mui/system/esm/sizing/sizing.js
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
@@ -7148,14 +7506,13 @@ var width = style_default({
 var maxWidth = (props) => {
   if (props.maxWidth !== void 0 && 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?.breakpoints?.values?.[propValue] || values[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
         };
       }
-      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== "px") {
+      if (props.theme?.breakpoints?.unit !== "px") {
         return {
           maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
         };
@@ -7465,6 +7822,9 @@ var defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: "font"
+  },
   fontFamily: {
     themeKey: "typography"
   },
@@ -7542,15 +7902,15 @@ function unstable_createStyleFunctionSx() {
     return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx2(props) {
-    var _theme$unstable_sxCon;
     const {
       sx,
-      theme: theme2 = {}
+      theme: theme2 = {},
+      nested
     } = props || {};
     if (!sx) {
       return null;
     }
-    const config = (_theme$unstable_sxCon = theme2.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig_default;
+    const config = theme2.unstable_sxConfig ?? defaultSxConfig_default;
     function traverse(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === "function") {
@@ -7579,7 +7939,8 @@ function unstable_createStyleFunctionSx() {
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css2[styleKey] = styleFunctionSx2({
                   sx: value,
-                  theme: theme2
+                  theme: theme2,
+                  nested: true
                 });
               } else {
                 css2 = merge_default(css2, breakpointsValues);
@@ -7590,7 +7951,12 @@ function unstable_createStyleFunctionSx() {
           }
         }
       });
-      return removeUnusedBreakpoints(breakpointsKeys, css2);
+      if (!nested && theme2.modularCssLayers) {
+        return {
+          "@layer sx": sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2))
+        };
+      }
+      return sortContainerQueries(theme2, removeUnusedBreakpoints(breakpointsKeys, css2));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -7601,29 +7967,38 @@ styleFunctionSx.filterProps = ["sx"];
 var styleFunctionSx_default = styleFunctionSx;
 
 // node_modules/@mui/system/esm/createTheme/applyStyles.js
-function applyStyles(key, styles2) {
+function applyStyles(key, styles3) {
   const theme2 = this;
-  if (theme2.vars && typeof theme2.getColorSchemeSelector === "function") {
-    const selector = theme2.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, "*:where($1)");
+  if (theme2.vars) {
+    if (!theme2.colorSchemes?.[key] || typeof theme2.getColorSchemeSelector !== "function") {
+      return {};
+    }
+    let selector = theme2.getColorSchemeSelector(key);
+    if (selector === "&") {
+      return styles3;
+    }
+    if (selector.includes("data-") || selector.includes(".")) {
+      selector = `*:where(${selector.replace(/\s*&$/, "")}) &`;
+    }
     return {
-      [selector]: styles2
+      [selector]: styles3
     };
   }
   if (theme2.palette.mode === key) {
-    return styles2;
+    return styles3;
   }
   return {};
 }
 
 // node_modules/@mui/system/esm/createTheme/createTheme.js
-var _excluded2 = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput = {},
     palette: paletteInput = {},
     spacing: spacingInput,
-    shape: shapeInput = {}
-  } = options, other = _objectWithoutPropertiesLoose(options, _excluded2);
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints2 = createBreakpoints(breakpointsInput);
   const spacing2 = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -7631,15 +8006,23 @@ function createTheme(options = {}, ...args) {
     direction: "ltr",
     components: {},
     // Inject component definitions.
-    palette: _extends({
-      mode: "light"
-    }, paletteInput),
+    palette: {
+      mode: "light",
+      ...paletteInput
+    },
     spacing: spacing2,
-    shape: _extends({}, shape_default, shapeInput)
+    shape: {
+      ...shape_default,
+      ...shapeInput
+    }
   }, other);
+  muiTheme = cssContainerQueries(muiTheme);
   muiTheme.applyStyles = applyStyles;
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig_default, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig_default,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx_default({
       sx: props,
@@ -7650,7 +8033,7 @@ function createTheme(options = {}, ...args) {
 }
 var createTheme_default = createTheme;
 
-// node_modules/@mui/system/esm/useThemeWithoutDefault.js
+// node_modules/@mui/system/esm/useThemeWithoutDefault/useThemeWithoutDefault.js
 import * as React15 from "react";
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
@@ -7661,7 +8044,7 @@ function useTheme(defaultTheme = null) {
 }
 var useThemeWithoutDefault_default = useTheme;
 
-// node_modules/@mui/system/esm/useTheme.js
+// node_modules/@mui/system/esm/useTheme/useTheme.js
 var systemDefaultTheme = createTheme_default();
 function useTheme2(defaultTheme = systemDefaultTheme) {
   return useThemeWithoutDefault_default(defaultTheme);
@@ -7669,14 +8052,12 @@ function useTheme2(defaultTheme = systemDefaultTheme) {
 var useTheme_default = useTheme2;
 
 // node_modules/@mui/system/esm/styleFunctionSx/extendSxProp.js
-var _excluded3 = ["sx"];
 var splitProps = (props) => {
-  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig_default;
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig_default;
   Object.keys(props).forEach((prop) => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -7688,8 +8069,9 @@ var splitProps = (props) => {
 };
 function extendSxProp(props) {
   const {
-    sx: inSx
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded3);
+    sx: inSx,
+    ...other
+  } = props;
   const {
     systemProps,
     otherProps
@@ -7703,18 +8085,25 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _extends({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return _extends({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }
 
 // node_modules/@mui/system/esm/Box/Box.js
-var import_prop_types2 = __toESM(require_prop_types());
+var import_prop_types2 = __toESM(require_prop_types(), 1);
 
 // node_modules/@mui/utils/esm/ClassNameGenerator/ClassNameGenerator.js
 var defaultGenerator = (componentName) => componentName;
@@ -7735,10 +8124,10 @@ var createClassNameGenerator = () => {
 var ClassNameGenerator = createClassNameGenerator();
 var ClassNameGenerator_default = ClassNameGenerator;
 
-// node_modules/@mui/system/esm/createBox.js
+// node_modules/@mui/system/esm/createBox/createBox.js
 import * as React16 from "react";
 
-// node_modules/@mui/system/node_modules/clsx/dist/clsx.mjs
+// node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -7754,9 +8143,8 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// node_modules/@mui/system/esm/createBox.js
+// node_modules/@mui/system/esm/createBox/createBox.js
 import { jsx as _jsx } from "react/jsx-runtime";
-var _excluded4 = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -7769,16 +8157,18 @@ function createBox(options = {}) {
   })(styleFunctionSx_default);
   const Box8 = /* @__PURE__ */ React16.forwardRef(function Box9(inProps, ref) {
     const theme2 = useTheme_default(defaultTheme);
-    const _extendSxProp = extendSxProp(inProps), {
+    const {
       className,
-      component = "div"
-    } = _extendSxProp, other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded4);
-    return /* @__PURE__ */ _jsx(BoxRoot, _extends({
+      component = "div",
+      ...other
+    } = extendSxProp(inProps);
+    return /* @__PURE__ */ _jsx(BoxRoot, {
       as: component,
       ref,
       className: clsx_default(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme2[themeId] || theme2 : theme2
-    }, other));
+      theme: themeId ? theme2[themeId] || theme2 : theme2,
+      ...other
+    });
   });
   return Box8;
 }
@@ -7843,15 +8233,9 @@ true ? Box2.propTypes = {
 var Box_default2 = Box2;
 
 // node_modules/@mui/utils/esm/getDisplayName/getDisplayName.js
-var import_react_is = __toESM(require_react_is2());
-var fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
-function getFunctionName(fn) {
-  const match = `${fn}`.match(fnNameMatchRegex);
-  const name = match && match[1];
-  return name || "";
-}
+var import_react_is2 = __toESM(require_react_is2(), 1);
 function getFunctionComponentName(Component, fallback = "") {
-  return Component.displayName || Component.name || getFunctionName(Component) || fallback;
+  return Component.displayName || Component.name || fallback;
 }
 function getWrappedName(outerType, innerType, wrapperName) {
   const functionName = getFunctionComponentName(innerType);
@@ -7869,9 +8253,9 @@ function getDisplayName(Component) {
   }
   if (typeof Component === "object") {
     switch (Component.$$typeof) {
-      case import_react_is.ForwardRef:
+      case import_react_is2.ForwardRef:
         return getWrappedName(Component, Component.render, "ForwardRef");
-      case import_react_is.Memo:
+      case import_react_is2.Memo:
         return getWrappedName(Component, Component.type, "memo");
       default:
         return void 0;
@@ -7880,84 +8264,105 @@ function getDisplayName(Component) {
   return void 0;
 }
 
-// node_modules/@mui/system/esm/createStyled.js
-var _excluded5 = ["ownerState"];
-var _excluded22 = ["variants"];
-var _excluded32 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
-function isStringTag(tag) {
-  return typeof tag === "string" && // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
+// node_modules/@mui/system/esm/preprocessStyles.js
+function preprocessStyles(input) {
+  const {
+    variants: variants3,
+    ...style3
+  } = input;
+  const result = {
+    variants: variants3,
+    style: internal_serializeStyles(style3),
+    isProcessed: true
+  };
+  if (result.style === style3) {
+    return result;
+  }
+  if (variants3) {
+    variants3.forEach((variant) => {
+      if (typeof variant.style !== "function") {
+        variant.style = internal_serializeStyles(variant.style);
+      }
+    });
+  }
+  return result;
 }
+
+// node_modules/@mui/system/esm/createStyled/createStyled.js
+var systemDefaultTheme2 = createTheme_default();
 function shouldForwardProp(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
 }
-var systemDefaultTheme2 = createTheme_default();
-var lowercaseFirstLetter = (string) => {
-  if (!string) {
-    return string;
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
   }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-};
-function resolveTheme({
-  defaultTheme,
-  theme: theme2,
-  themeId
-}) {
-  return isEmpty(theme2) ? defaultTheme : theme2[themeId] || theme2;
+  return serialized;
 }
 function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
   }
-  return (props, styles2) => styles2[slot];
+  return (_props, styles3) => styles3[slot];
 }
-function processStyleArg(callableStyle, _ref) {
-  let {
-    ownerState
-  } = _ref, props = _objectWithoutPropertiesLoose(_ref, _excluded5);
-  const resolvedStylesArg = typeof callableStyle === "function" ? callableStyle(_extends({
-    ownerState
-  }, props)) : callableStyle;
-  if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap((resolvedStyle) => processStyleArg(resolvedStyle, _extends({
-      ownerState
-    }, props)));
+function attachTheme(props, themeId, defaultTheme) {
+  props.theme = isObjectEmpty2(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
+}
+function processStyle(props, style3, layerName) {
+  const resolvedStyle = typeof style3 === "function" ? style3(props) : style3;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap((subStyle) => processStyle(props, subStyle, layerName));
   }
-  if (!!resolvedStylesArg && typeof resolvedStylesArg === "object" && Array.isArray(resolvedStylesArg.variants)) {
-    const {
-      variants: variants3 = []
-    } = resolvedStylesArg, otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded22);
-    let result = otherStyles;
-    variants3.forEach((variant) => {
-      let isMatch = true;
-      if (typeof variant.props === "function") {
-        isMatch = variant.props(_extends({
-          ownerState
-        }, props, ownerState));
-      } else {
-        Object.keys(variant.props).forEach((key) => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
-          }
-        });
+  if (Array.isArray(resolvedStyle?.variants)) {
+    let rootStyle;
+    if (resolvedStyle.isProcessed) {
+      rootStyle = layerName ? shallowLayer(resolvedStyle.style, layerName) : resolvedStyle.style;
+    } else {
+      const {
+        variants: variants3,
+        ...otherStyles
+      } = resolvedStyle;
+      rootStyle = layerName ? shallowLayer(internal_serializeStyles(otherStyles), layerName) : otherStyles;
+    }
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle], layerName);
+  }
+  if (resolvedStyle?.isProcessed) {
+    return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle.style), layerName) : resolvedStyle.style;
+  }
+  return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle), layerName) : resolvedStyle;
+}
+function processStyleVariants(props, variants3, results = [], layerName = void 0) {
+  let mergedState;
+  variantLoop: for (let i = 0; i < variants3.length; i += 1) {
+    const variant = variants3[i];
+    if (typeof variant.props === "function") {
+      mergedState ??= {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      };
+      if (!variant.props(mergedState)) {
+        continue;
       }
-      if (isMatch) {
-        if (!Array.isArray(result)) {
-          result = [result];
+    } else {
+      for (const key in variant.props) {
+        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+          continue variantLoop;
         }
-        result.push(typeof variant.style === "function" ? variant.style(_extends({
-          ownerState
-        }, props, ownerState)) : variant.style);
       }
-    });
-    return result;
+    }
+    if (typeof variant.style === "function") {
+      mergedState ??= {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      };
+      results.push(layerName ? shallowLayer(internal_serializeStyles(variant.style(mergedState)), layerName) : variant.style(mergedState));
+    } else {
+      results.push(layerName ? shallowLayer(internal_serializeStyles(variant.style), layerName) : variant.style);
+    }
   }
-  return resolvedStylesArg;
+  return results;
 }
 function createStyled(input = {}) {
   const {
@@ -7966,17 +8371,11 @@ function createStyled(input = {}) {
     rootShouldForwardProp = shouldForwardProp,
     slotShouldForwardProp = shouldForwardProp
   } = input;
-  const systemSx = (props) => {
-    return styleFunctionSx_default(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
-        defaultTheme,
-        themeId
-      }))
-    }));
-  };
-  systemSx.__mui_systemSx = true;
-  return (tag, inputOptions = {}) => {
-    internal_processStyles(tag, (styles2) => styles2.filter((style3) => !(style3 != null && style3.__mui_systemSx)));
+  function styleAttachTheme(props) {
+    attachTheme(props, themeId, defaultTheme);
+  }
+  const styled9 = (tag, inputOptions = {}) => {
+    internal_mutateStyles(tag, (styles3) => styles3.filter((style3) => style3 !== styleFunctionSx_default));
     const {
       name: componentName,
       slot: componentSlot,
@@ -7984,20 +8383,16 @@ function createStyled(input = {}) {
       skipSx: inputSkipSx,
       // TODO v6: remove `lowercaseFirstLetter()` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
-      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
-    } = inputOptions, options = _objectWithoutPropertiesLoose(inputOptions, _excluded32);
+      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
+      ...options
+    } = inputOptions;
+    const layerName = componentName && componentName.startsWith("Mui") || !!componentSlot ? "components" : "custom";
     const skipVariantsResolver = inputSkipVariantsResolver !== void 0 ? inputSkipVariantsResolver : (
       // TODO v6: remove `Root` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
       componentSlot && componentSlot !== "Root" && componentSlot !== "root" || false
     );
     const skipSx = inputSkipSx || false;
-    let label;
-    if (true) {
-      if (componentName) {
-        label = `${componentName}-${lowercaseFirstLetter(componentSlot || "Root")}`;
-      }
-    }
     let shouldForwardPropOption = shouldForwardProp;
     if (componentSlot === "Root" || componentSlot === "root") {
       shouldForwardPropOption = rootShouldForwardProp;
@@ -8006,82 +8401,82 @@ function createStyled(input = {}) {
     } else if (isStringTag(tag)) {
       shouldForwardPropOption = void 0;
     }
-    const defaultStyledResolver = styled2(tag, _extends({
+    const defaultStyledResolver = styled2(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
-    const transformStyleArg = (stylesArg) => {
-      if (typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return (props) => processStyleArg(stylesArg, _extends({}, props, {
-          theme: resolveTheme({
-            theme: props.theme,
-            defaultTheme,
-            themeId
-          })
-        }));
+      label: generateStyledLabel(componentName, componentSlot),
+      ...options
+    });
+    const transformStyle = (style3) => {
+      if (style3.__emotion_real === style3) {
+        return style3;
       }
-      return stylesArg;
+      if (typeof style3 === "function") {
+        return function styleFunctionProcessor(props) {
+          return processStyle(props, style3, props.theme.modularCssLayers ? layerName : void 0);
+        };
+      }
+      if (isPlainObject(style3)) {
+        const serialized = preprocessStyles(style3);
+        return function styleObjectProcessor(props) {
+          if (!serialized.variants) {
+            return props.theme.modularCssLayers ? shallowLayer(serialized.style, layerName) : serialized.style;
+          }
+          return processStyle(props, serialized, props.theme.modularCssLayers ? layerName : void 0);
+        };
+      }
+      return style3;
     };
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      let transformedStyleArg = transformStyleArg(styleArg);
-      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
+    const muiStyledResolver = (...expressionsInput) => {
+      const expressionsHead = [];
+      const expressionsBody = expressionsInput.map(transformStyle);
+      const expressionsTail = [];
+      expressionsHead.push(styleAttachTheme);
       if (componentName && overridesResolver) {
-        expressionsWithDefaultTheme.push((props) => {
-          const theme2 = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
-          if (!theme2.components || !theme2.components[componentName] || !theme2.components[componentName].styleOverrides) {
+        expressionsTail.push(function styleThemeOverrides(props) {
+          const theme2 = props.theme;
+          const styleOverrides = theme2.components?.[componentName]?.styleOverrides;
+          if (!styleOverrides) {
             return null;
           }
-          const styleOverrides = theme2.components[componentName].styleOverrides;
           const resolvedStyleOverrides = {};
-          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
-              theme: theme2
-            }));
-          });
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey], props.theme.modularCssLayers ? "theme" : void 0);
+          }
           return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
-        expressionsWithDefaultTheme.push((props) => {
-          var _theme$components;
-          const theme2 = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
-          const themeVariants = theme2 == null || (_theme$components = theme2.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
-          return processStyleArg({
-            variants: themeVariants
-          }, _extends({}, props, {
-            theme: theme2
-          }));
+        expressionsTail.push(function styleThemeVariants(props) {
+          const theme2 = props.theme;
+          const themeVariants = theme2?.components?.[componentName]?.variants;
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(systemSx);
+        expressionsTail.push(styleFunctionSx_default);
       }
-      const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-        const placeholders = new Array(numOfCustomFnsApplied).fill("");
-        transformedStyleArg = [...styleArg, ...placeholders];
-        transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      }
-      const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
-      if (true) {
-        let displayName;
-        if (componentName) {
-          displayName = `${componentName}${capitalize(componentSlot || "")}`;
-        }
-        if (displayName === void 0) {
-          displayName = `Styled(${getDisplayName(tag)})`;
+      if (Array.isArray(expressionsBody[0])) {
+        const inputStrings = expressionsBody.shift();
+        const placeholdersHead = new Array(expressionsHead.length).fill("");
+        const placeholdersTail = new Array(expressionsTail.length).fill("");
+        let outputStrings;
+        {
+          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
         }
-        Component.displayName = displayName;
+        expressionsHead.unshift(outputStrings);
       }
+      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
+      const Component = defaultStyledResolver(...expressions);
       if (tag.muiName) {
         Component.muiName = tag.muiName;
       }
+      if (true) {
+        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
+      }
       return Component;
     };
     if (defaultStyledResolver.withConfig) {
@@ -8089,9 +8484,43 @@ function createStyled(input = {}) {
     }
     return muiStyledResolver;
   };
+  return styled9;
+}
+function generateDisplayName(componentName, componentSlot, tag) {
+  if (componentName) {
+    return `${componentName}${capitalize(componentSlot || "")}`;
+  }
+  return `Styled(${getDisplayName(tag)})`;
+}
+function generateStyledLabel(componentName, componentSlot) {
+  let label;
+  if (true) {
+    if (componentName) {
+      label = `${componentName}-${lowercaseFirstLetter(componentSlot || "Root")}`;
+    }
+  }
+  return label;
+}
+function isObjectEmpty2(object) {
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+function isStringTag(tag) {
+  return typeof tag === "string" && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
+}
+function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
 }
 
-// node_modules/@mui/system/esm/styled.js
+// node_modules/@mui/system/esm/styled/styled.js
 var styled3 = createStyled();
 var styled_default = styled3;
 
@@ -8926,17 +9355,8 @@ var theme = createTheme2({
 });
 
 // src/components/tooltip/TooltipMenu.tsx
-import { Tooltip as Tooltip2, tooltipClasses } from "@mui/material";
-import { styled as styled4 } from "@mui/material/styles";
+import { Tooltip as Tooltip3, tooltipClasses } from "@mui/material";
 import { jsx as jsx30 } from "react/jsx-runtime";
-var UnstyledTooltip = styled4(({ className, ...props }) => /* @__PURE__ */ jsx30(Tooltip2, { ...props, classes: { popper: className } }))(() => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    margin: "0 !important",
-    padding: 0,
-    border: "none",
-    background: "transparent"
-  }
-}));
 var TooltipMenu = ({
   children,
   placement = "top-start",
@@ -8945,15 +9365,22 @@ var TooltipMenu = ({
   offsetTop = 0,
   offsetLeft = 0
 }) => /* @__PURE__ */ jsx30(
-  UnstyledTooltip,
+  Tooltip3,
   {
-    componentsProps: {
+    slotProps: {
       popper: {
         sx: {
-          zIndex: 1200
+          zIndex: 1200,
           // Make lower z-index of Popper component of this
           // tooltip so it is shown under any inner Menu-like component (like a MenuIconButton
           // or a MenuButton) which usually have z-index 1300
+          pointerEvents: "auto",
+          [`& .${tooltipClasses.tooltip}`]: {
+            margin: "0 !important",
+            padding: 0,
+            border: "none",
+            background: "transparent"
+          }
         },
         modifiers: [
           {
@@ -9094,7 +9521,7 @@ var AvatarCard_default = AvatarCard;
 // src/components/button/MenuIconButton.tsx
 import * as React19 from "react";
 import MuiMenu from "@mui/material/Menu";
-import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 var MenuIconButton = React19.forwardRef(function MenuIconButton2({
   children,
   isOpen: managedIsOpen,
@@ -9139,7 +9566,7 @@ var MenuIconButton = React19.forwardRef(function MenuIconButton2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
     /* @__PURE__ */ jsx33(
       IconButton_default,
       {
@@ -9870,7 +10297,7 @@ var ButtonWithActions_default = ButtonWithActions;
 // src/components/button/MenuButton.tsx
 import * as React24 from "react";
 import MuiMenu3 from "@mui/material/Menu";
-import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var MenuButton = React24.forwardRef(function MenuButton2({
   children,
   isOpen: managedIsOpen,
@@ -9915,7 +10342,7 @@ var MenuButton = React24.forwardRef(function MenuButton2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
     /* @__PURE__ */ jsx42(
       Button_default,
       {
@@ -10257,7 +10684,7 @@ var EnhancedCardTitle = ({
   text,
   justify = "center",
   forceHeight = false,
-  cursor = "default",
+  cursor: cursor2 = "default",
   variant = "body2",
   size = "M",
   dataTest
@@ -10281,7 +10708,7 @@ var EnhancedCardTitle = ({
           sx: {
             textAlign: justify,
             userSelect: "none",
-            cursor
+            cursor: cursor2
           },
           text,
           color: grey900,
@@ -10301,7 +10728,7 @@ import { jsx as jsx50 } from "react/jsx-runtime";
 var EnhancedCardSubtitle = ({
   text,
   justify = "center",
-  cursor = "default",
+  cursor: cursor2 = "default",
   variant = "body2",
   dataTest
 }) => /* @__PURE__ */ jsx50(
@@ -10320,7 +10747,7 @@ var EnhancedCardSubtitle = ({
         sx: {
           textAlign: justify,
           userSelect: "none",
-          cursor
+          cursor: cursor2
         },
         text,
         color: grey600,
@@ -10814,7 +11241,7 @@ import * as React30 from "react";
 // src/components/chip/MenuChip.tsx
 import * as React29 from "react";
 import MuiMenu4 from "@mui/material/Menu";
-import { Fragment as Fragment5, jsx as jsx60, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx60, jsxs as jsxs23 } from "react/jsx-runtime";
 var MenuChip = React29.forwardRef(function MenuChip2({
   children,
   isOpen: managedIsOpen,
@@ -10856,7 +11283,7 @@ var MenuChip = React29.forwardRef(function MenuChip2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs23(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
     /* @__PURE__ */ jsx60(
       Chip_default,
       {
@@ -10902,7 +11329,7 @@ var MenuChip = React29.forwardRef(function MenuChip2({
 var MenuChip_default = MenuChip;
 
 // src/components/card/EnhancedCard.tsx
-import { Fragment as Fragment6, jsx as jsx61, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs24 } from "react/jsx-runtime";
 var cardWidthBySize = {
   S: 110,
   M: 110,
@@ -10985,7 +11412,7 @@ var EnhancedCard = React30.forwardRef(
     rightIconId,
     dataTest,
     disableHover = false,
-    cursor,
+    cursor: cursor2,
     actionProps,
     showActionOnHover = false,
     badgeProps,
@@ -11012,7 +11439,7 @@ var EnhancedCard = React30.forwardRef(
     const cardStyle = {
       ...getCardStyles(size),
       ...disableHover ? {} : hoverCardStyle,
-      cursor,
+      cursor: cursor2,
       ...selected && {
         boxShadow: "0 0 0 3px",
         color: primary600
@@ -11036,7 +11463,7 @@ var EnhancedCard = React30.forwardRef(
               {
                 size,
                 dataTest,
-                cursor,
+                cursor: cursor2,
                 ...getChildProps()
               }
             );
@@ -11057,12 +11484,12 @@ var EnhancedCard = React30.forwardRef(
                 titleProps: {
                   size,
                   dataTest,
-                  cursor
+                  cursor: cursor2
                 },
                 subtitleProps: {
                   size,
                   dataTest,
-                  cursor
+                  cursor: cursor2
                 },
                 ...getChildProps()
               }
@@ -11233,7 +11660,7 @@ var EnhancedCard = React30.forwardRef(
                         backgroundColor: primary200
                       }
                     } : {
-                      cursor
+                      cursor: cursor2
                     }
                   },
                   size: "S",
@@ -11247,7 +11674,7 @@ var EnhancedCard = React30.forwardRef(
               )
             }
           ),
-          isHovered && hoverComponent && /* @__PURE__ */ jsxs24(Fragment6, { children: [
+          isHovered && hoverComponent && /* @__PURE__ */ jsxs24(Fragment7, { children: [
             /* @__PURE__ */ jsx61(
               Box_default,
               {
@@ -11563,7 +11990,7 @@ var BarChart2 = ({
   }),
   onClick
 }) => {
-  const cursor = onClick ? "pointer" : "default";
+  const cursor2 = onClick ? "pointer" : "default";
   const silent = onClick ? false : true;
   const isComparison = series.some(
     (s) => s.data.some((d) => d.comparisonValue !== void 0)
@@ -11729,7 +12156,7 @@ var BarChart2 = ({
         ...isComparison ? [
           {
             ...defaultBarSeriesOptions,
-            cursor,
+            cursor: cursor2,
             silent,
             showBackground: false,
             stack: `${serieIndex}`,
@@ -11761,7 +12188,7 @@ var BarChart2 = ({
         ] : [],
         {
           ...defaultBarSeriesOptions,
-          cursor,
+          cursor: cursor2,
           silent,
           showBackground: true,
           stack: `${serieIndex}`,
@@ -11841,7 +12268,7 @@ var LineChart2 = ({
   yAxisPosition = "right"
 }) => {
   const theme2 = useTheme3();
-  const cursor = onClick ? "pointer" : "default";
+  const cursor2 = onClick ? "pointer" : "default";
   const silent = onClick ? false : true;
   const isComparing = series.some(
     (s) => s.data.some((d) => "comparisonValue" in d)
@@ -12061,7 +12488,7 @@ var LineChart2 = ({
           type: "line",
           name,
           yAxisIndex,
-          cursor,
+          cursor: cursor2,
           silent,
           data: data.map((data2) => data2.value),
           color: color2,
@@ -12090,7 +12517,7 @@ var LineChart2 = ({
           type: "line",
           name,
           yAxisIndex,
-          cursor,
+          cursor: cursor2,
           silent,
           data: data.map(
             (data2) => data2.comparisonValue
@@ -12456,7 +12883,7 @@ var DonutChartLegendItem_default = DonutChartLegendItem;
 
 // src/components/chart/DonutChart.tsx
 import { alpha as alpha4 } from "@mui/material/styles";
-import { Fragment as Fragment9, jsx as jsx73, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx73, jsxs as jsxs30 } from "react/jsx-runtime";
 var DonutChart = ({
   style: style3,
   isLoading,
@@ -12469,7 +12896,7 @@ var DonutChart = ({
   const mainMetricMargin = 10;
   const comparisonMetricMargin = 0;
   let currentRadius = 100;
-  const cursor = onClick ? "pointer" : "default";
+  const cursor2 = onClick ? "pointer" : "default";
   const isComparison = (series[0]?.data ?? []).some(
     (d) => d.comparisonLabel || d.comparisonValue
   );
@@ -12499,7 +12926,7 @@ var DonutChart = ({
         );
         previous.push({
           type: "pie",
-          cursor,
+          cursor: cursor2,
           emptyCircleStyle: {
             color: alpha4(grey200, 0.5)
           },
@@ -12530,7 +12957,7 @@ var DonutChart = ({
           currentRadius -= comparisonMetricMargin;
           previous.push({
             type: "pie",
-            cursor,
+            cursor: cursor2,
             emptyCircleStyle: {
               color: alpha4(grey200, 0.5)
             },
@@ -12616,7 +13043,7 @@ var DonutChart = ({
         flexDirection: "column",
         ...style3
       },
-      children: isLoading ? /* @__PURE__ */ jsx73(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs30(Fragment9, { children: [
+      children: isLoading ? /* @__PURE__ */ jsx73(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs30(Fragment10, { children: [
         /* @__PURE__ */ jsxs30(Box_default, { sx: { flexGrow: 1, position: "relative" }, children: [
           title,
           /* @__PURE__ */ jsx73(
@@ -12696,7 +13123,7 @@ var FunnelChart = ({
   }),
   onClick
 }) => {
-  const cursor = onClick ? "pointer" : "default";
+  const cursor2 = onClick ? "pointer" : "default";
   const silent = onClick ? false : true;
   const isComparison = series.some(
     (s) => s.data.some((d) => d.comparisonValue !== void 0)
@@ -12733,7 +13160,7 @@ var FunnelChart = ({
   };
   const defaultBarSeriesOptions = {
     type: "bar",
-    cursor,
+    cursor: cursor2,
     silent,
     barGap: 0,
     backgroundStyle: {
@@ -14955,7 +15382,7 @@ var useTranslation = () => {
 import {
   Dialog as MuiDialog
 } from "@mui/material";
-import { Fragment as Fragment11, jsx as jsx81, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx81, jsxs as jsxs36 } from "react/jsx-runtime";
 var sizes5 = {
   S: "480px",
   M: "640px",
@@ -14977,7 +15404,7 @@ var Dialog = ({
   onClose,
   ...rest
 }) => {
-  const getDialogContent = () => /* @__PURE__ */ jsxs36(Fragment11, { children: [
+  const getDialogContent = () => /* @__PURE__ */ jsxs36(Fragment12, { children: [
     /* @__PURE__ */ jsxs36(
       Stack_default,
       {
@@ -16950,23 +17377,23 @@ function isValidPhoneNumber(phone) {
 }
 
 // src/components/formatter/CompactNumberFormatter.tsx
-import { Fragment as Fragment12, jsx as jsx85 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx85 } from "react/jsx-runtime";
 var CompactNumberFormatter = ({ value }) => {
   const { locale } = React37.useContext(IntlContext);
-  return /* @__PURE__ */ jsx85(Fragment12, { children: formatCompactNumber(value, locale) });
+  return /* @__PURE__ */ jsx85(Fragment13, { children: formatCompactNumber(value, locale) });
 };
 var CompactNumberFormatter_default = CompactNumberFormatter;
 
 // src/components/formatter/CurrencyFormatter.tsx
 import * as React38 from "react";
-import { Fragment as Fragment13, jsx as jsx86 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx86 } from "react/jsx-runtime";
 var CurrencyFormatter = ({
   value,
   notation,
   currency
 }) => {
   const { locale, currency: contextCurrency } = React38.useContext(IntlContext);
-  return /* @__PURE__ */ jsx86(Fragment13, { children: formatCurrency(
+  return /* @__PURE__ */ jsx86(Fragment14, { children: formatCurrency(
     value,
     locale,
     currency ?? contextCurrency,
@@ -16977,31 +17404,31 @@ var CurrencyFormatter_default = CurrencyFormatter;
 
 // src/components/formatter/NumberFormatter.tsx
 import * as React39 from "react";
-import { Fragment as Fragment14, jsx as jsx87 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx87 } from "react/jsx-runtime";
 var NumberFormatter = ({ value, fractionSize }) => {
   const { locale } = React39.useContext(IntlContext);
-  return /* @__PURE__ */ jsx87(Fragment14, { children: formatNumber(value, locale, fractionSize) });
+  return /* @__PURE__ */ jsx87(Fragment15, { children: formatNumber(value, locale, fractionSize) });
 };
 var NumberFormatter_default = NumberFormatter;
 
 // src/components/formatter/PercentageFormatter.tsx
 import * as React40 from "react";
-import { Fragment as Fragment15, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx88 } from "react/jsx-runtime";
 var PercentageFormatter = ({
   value,
   fractionSize
 }) => {
   const { locale } = React40.useContext(IntlContext);
-  return /* @__PURE__ */ jsx88(Fragment15, { children: formatPercentage(value, locale, fractionSize) });
+  return /* @__PURE__ */ jsx88(Fragment16, { children: formatPercentage(value, locale, fractionSize) });
 };
 var PercentageFormatter_default = PercentageFormatter;
 
 // src/components/formatter/DateFormatter.tsx
 import * as React41 from "react";
-import { Fragment as Fragment16, jsx as jsx89 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx89 } from "react/jsx-runtime";
 var DateFormatter = ({ date, format: format2 }) => {
   const { locale, timezone } = React41.useContext(IntlContext);
-  return /* @__PURE__ */ jsx89(Fragment16, { children: formatDate(date, locale, timezone, format2) });
+  return /* @__PURE__ */ jsx89(Fragment17, { children: formatDate(date, locale, timezone, format2) });
 };
 var DateFormatter_default = DateFormatter;
 
@@ -17755,20 +18182,23 @@ import { useEffect as useEffect10, useState as useState15 } from "react";
 
 // src/components/input/TextField.tsx
 import * as React49 from "react";
-import { styled as styled7 } from "@mui/material";
+import { styled as styled6 } from "@mui/material";
 
 // src/components/input/InputLabel.tsx
 import * as React47 from "react";
-import { styled as styled5 } from "@mui/material";
+import { styled as styled4 } from "@mui/material";
 import { jsx as jsx96, jsxs as jsxs41 } from "react/jsx-runtime";
 var severityColors = {
   info: grey900,
   error: errorMain
 };
-var StyledLabel = styled5("label", {
+var StyledLabel = styled4("label", {
   shouldForwardProp: (prop) => prop !== "severity"
 })(
-  ({ severity, theme: theme2 }) => theme2.unstable_sx({
+  ({
+    severity,
+    theme: theme2
+  }) => theme2.unstable_sx({
     display: "block",
     padding: "4px 0",
     ...variants["caption"],
@@ -17806,17 +18236,20 @@ var InputLabel = React47.forwardRef(
 var InputLabel_default = InputLabel;
 
 // src/components/input/InputHelperText.tsx
-import { styled as styled6 } from "@mui/material";
+import { styled as styled5 } from "@mui/material";
 import * as React48 from "react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var severityColors2 = {
   info: grey800,
   error: errorMain
 };
-var StyledDiv = styled6("div", {
+var StyledDiv = styled5("div", {
   shouldForwardProp: (prop) => prop !== "severity"
 })(
-  ({ severity, theme: theme2 }) => theme2.unstable_sx({
+  ({
+    severity,
+    theme: theme2
+  }) => theme2.unstable_sx({
     padding: "4px 8px",
     ...variants["caption"],
     color: severityColors2[severity]
@@ -17830,7 +18263,7 @@ var InputHelperText = React48.forwardRef(
 var InputHelperText_default = InputHelperText;
 
 // src/components/input/TextField.tsx
-import { Fragment as Fragment17, jsx as jsx98, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx98, jsxs as jsxs42 } from "react/jsx-runtime";
 var commonInputStylesOptions = {
   shouldForwardProp: (prop) => prop !== "variant"
 };
@@ -17853,13 +18286,13 @@ function getCommonInputStyles({ disabled }) {
     }
   };
 }
-var StyledInput = styled7(
+var StyledInput = styled6(
   "input",
   commonInputStylesOptions
 )(
   (props) => props.theme.unstable_sx(getCommonInputStyles(props))
 );
-var StyledTextarea = styled7(
+var StyledTextarea = styled6(
   "textarea",
   commonInputStylesOptions
 )(
@@ -18080,7 +18513,7 @@ var TextField = React49.forwardRef(function TextField2({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs42(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment18, { children: [
     label && /* @__PURE__ */ jsx98(
       InputLabel_default,
       {
@@ -19508,7 +19941,7 @@ var DateIntervalPicker_default = DateIntervalPicker;
 // src/components/input/SelectPopoverItem.tsx
 import { Grid as Grid2, Stack as Stack7 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
-import { Fragment as Fragment18, jsx as jsx110, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx110, jsxs as jsxs50 } from "react/jsx-runtime";
 var bgColorLightCoefficient2 = 0.9;
 var SelectPopoverItem = ({
   id,
@@ -19522,112 +19955,121 @@ var SelectPopoverItem = ({
   tooltip,
   isLoadingSubtitle2,
   onClick
-}) => /* @__PURE__ */ jsx110(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx110(Grid2, { item: true, xs: 6, children: /* @__PURE__ */ jsxs50(
-  Stack7,
+}) => /* @__PURE__ */ jsx110(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx110(
+  Grid2,
   {
-    direction: "row",
-    sx: {
-      border: `1px solid ${color2 ? color2 : Colors_exports.grey200}`,
-      padding: "8px 8px 8px 4px",
-      boxSizing: "border-box",
-      borderRadius: "8px",
-      boxShadow: shadows[1],
-      backgroundColor: color2 ? lighten3(color2, bgColorLightCoefficient2) : Colors_exports.white,
-      height: "75px",
-      lineHeight: "20px",
-      cursor: disabled ? "default" : "pointer",
-      userSelect: "none"
+    size: {
+      xs: 6
     },
-    onClick: () => !disabled && typeof onClick === "function" && onClick(),
-    children: [
-      /* @__PURE__ */ jsxs50(
-        Box_default,
-        {
-          sx: {
-            paddingLeft: "16px",
-            minWidth: "0",
-            flexGrow: "2",
-            boxSizing: "border-box"
-          },
-          children: [
-            /* @__PURE__ */ jsx110(
-              TextEllipsis_default,
-              {
-                color: Colors_exports.grey800,
-                sx: {
-                  maxHeight: "20px",
-                  cursor: disabled ? "default" : "pointer"
-                },
-                typographyVariant: "body1",
-                text: /* @__PURE__ */ jsxs50(Fragment18, { children: [
-                  iconId && /* @__PURE__ */ jsx110(
-                    Icon_default,
-                    {
-                      id: iconId,
-                      sx: {
-                        color: Colors_exports.grey500,
-                        marginRight: "2px",
-                        width: "18px",
-                        height: "18px",
-                        verticalAlign: "bottom",
-                        marginLeft: "-4px"
-                      }
+    children: /* @__PURE__ */ jsxs50(
+      Stack7,
+      {
+        direction: "row",
+        sx: {
+          border: `1px solid ${color2 ? color2 : Colors_exports.grey200}`,
+          padding: "8px 8px 8px 4px",
+          boxSizing: "border-box",
+          borderRadius: "8px",
+          boxShadow: shadows[1],
+          backgroundColor: color2 ? lighten3(color2, bgColorLightCoefficient2) : Colors_exports.white,
+          height: "75px",
+          lineHeight: "20px",
+          cursor: disabled ? "default" : "pointer",
+          userSelect: "none"
+        },
+        onClick: () => !disabled && typeof onClick === "function" && onClick(),
+        children: [
+          /* @__PURE__ */ jsxs50(
+            Box_default,
+            {
+              sx: {
+                paddingLeft: "16px",
+                minWidth: "0",
+                flexGrow: "2",
+                boxSizing: "border-box"
+              },
+              children: [
+                /* @__PURE__ */ jsx110(
+                  TextEllipsis_default,
+                  {
+                    color: Colors_exports.grey800,
+                    sx: {
+                      maxHeight: "20px",
+                      cursor: disabled ? "default" : "pointer"
+                    },
+                    typographyVariant: "body1",
+                    text: /* @__PURE__ */ jsxs50(Fragment19, { children: [
+                      iconId && /* @__PURE__ */ jsx110(
+                        Icon_default,
+                        {
+                          id: iconId,
+                          sx: {
+                            color: Colors_exports.grey500,
+                            marginRight: "2px",
+                            width: "18px",
+                            height: "18px",
+                            verticalAlign: "bottom",
+                            marginLeft: "-4px"
+                          }
+                        }
+                      ),
+                      name
+                    ] })
+                  }
+                ),
+                subtitle1 && /* @__PURE__ */ jsx110(
+                  Typography_default,
+                  {
+                    variant: "body2",
+                    component: "p",
+                    noWrap: true,
+                    color: Colors_exports.grey600,
+                    children: subtitle1
+                  }
+                ),
+                isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                  Skeleton_default,
+                  {
+                    variant: "text",
+                    width: 200,
+                    height: 20,
+                    sx: {
+                      borderRadius: "8px",
+                      backgroundColor: Colors_exports.grey100
                     }
-                  ),
-                  name
-                ] })
-              }
-            ),
-            subtitle1 && /* @__PURE__ */ jsx110(
-              Typography_default,
-              {
-                variant: "body2",
-                component: "p",
-                noWrap: true,
-                color: Colors_exports.grey600,
-                children: subtitle1
-              }
-            ),
-            isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
-              Skeleton_default,
-              {
-                variant: "text",
-                width: 200,
-                height: 20,
-                sx: {
-                  borderRadius: "8px",
-                  backgroundColor: Colors_exports.grey100
-                }
-              }
-            ),
-            subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
-              Typography_default,
-              {
-                variant: "body2",
-                component: "p",
-                noWrap: true,
+                  }
+                ),
+                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                  Typography_default,
+                  {
+                    variant: "body2",
+                    component: "p",
+                    noWrap: true,
+                    color: Colors_exports.grey600,
+                    children: subtitle2
+                  }
+                )
+              ]
+            }
+          ),
+          chipText && /* @__PURE__ */ jsx110(Box_default, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx110(
+            Chip_default,
+            {
+              label: chipText,
+              sx: {
                 color: Colors_exports.grey600,
-                children: subtitle2
+                borderRadius: `50px`,
+                backgroundColor: Colors_exports.grey100,
+                height: "16px"
               }
-            )
-          ]
-        }
-      ),
-      chipText && /* @__PURE__ */ jsx110(Box_default, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx110(
-        Chip_default,
-        {
-          label: chipText,
-          sx: {
-            color: Colors_exports.grey600,
-            borderRadius: `50px`,
-            backgroundColor: Colors_exports.grey100,
-            height: "16px"
-          }
-        }
-      ) })
-    ]
-  }
-) }, id) });
+            }
+          ) })
+        ]
+      }
+    )
+  },
+  id
+) });
 var SelectPopoverItem_default = SelectPopoverItem;
 
 // src/components/input/TimezoneSelector.tsx
@@ -19636,13 +20078,13 @@ import * as moment2 from "moment-timezone";
 
 // src/components/input/Select.tsx
 import * as React56 from "react";
-import { styled as styled8 } from "@mui/material/styles";
+import { styled as styled7 } from "@mui/material/styles";
 import MuiSelect from "@mui/material/Select";
 import InputBase from "@mui/material/InputBase";
 import { FixedSizeList as FixedSizeList2 } from "react-window";
 import AutoSizer4 from "react-virtualized-auto-sizer";
 import { jsx as jsx111 } from "react/jsx-runtime";
-var BootstrapInput = styled8(InputBase)(() => ({
+var BootstrapInput = styled7(InputBase)(() => ({
   boxShadow: shadows[0],
   borderRadius: "16px",
   borderWidth: "1px",
@@ -20087,7 +20529,7 @@ import * as React59 from "react";
 import GradientColorPicker, {
   useColorPicker
 } from "react-best-gradient-color-picker";
-import { Fragment as Fragment19, jsx as jsx114, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs51 } from "react/jsx-runtime";
 var colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgba?\((\d{1,3}), {0,1}(\d{1,3}), {0,1}(\d{1,3})(, {0,1}([01]|0?\.\d+))?\)$/;
 var isValidColor = (color2) => colorRegex.test(color2);
 var colorPickerDefaultColors = [
@@ -20180,7 +20622,7 @@ var ColorPicker = React59.forwardRef(function ColorPickerWrapper({
       handleColorChange(internalPickerValue);
     }
   }, [value, internalPickerValue, onChange, isValidPickerChange, valueToHex]);
-  return /* @__PURE__ */ jsxs51(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment20, { children: [
     /* @__PURE__ */ jsx114(
       TextField_default,
       {
@@ -20322,7 +20764,7 @@ var UploadClickableArea_default = UploadClickableArea;
 // src/components/input/CategorizedPicker.tsx
 import React60 from "react";
 import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack8 } from "@mui/material";
-import { Fragment as Fragment20, jsx as jsx116, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx116, jsxs as jsxs53 } from "react/jsx-runtime";
 var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx116(
   Icon_default,
   {
@@ -20418,7 +20860,7 @@ var CategorizedPicker = function CategorizedPicker2({
       setSelectedCategory(filteredSelectedCategory);
     }
   }, [filteredCategories, selectedCategory]);
-  return /* @__PURE__ */ jsxs53(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment21, { children: [
     /* @__PURE__ */ jsx116(
       Select3,
       {
@@ -20479,8 +20921,9 @@ var CategorizedPicker = function CategorizedPicker2({
           /* @__PURE__ */ jsx116(
             Grid3,
             {
-              item: true,
-              xs: 12,
+              size: {
+                xs: 12
+              },
               padding: "8px",
               borderBottom: `1px solid ${grey200}`,
               children: /* @__PURE__ */ jsx116(
@@ -20499,8 +20942,9 @@ var CategorizedPicker = function CategorizedPicker2({
           /* @__PURE__ */ jsx116(
             Grid3,
             {
-              item: true,
-              xs: 4,
+              size: {
+                xs: 4
+              },
               sx: { borderRight: `1px solid ${grey200}` },
               height: "316px",
               className: "Slim-Vertical-Scroll",
@@ -20543,8 +20987,9 @@ var CategorizedPicker = function CategorizedPicker2({
           /* @__PURE__ */ jsx116(
             Grid3,
             {
-              item: true,
-              xs: 8,
+              size: {
+                xs: 8
+              },
               height: "316px",
               className: "Slim-Vertical-Scroll",
               children: /* @__PURE__ */ jsx116(Stack8, { children: /* @__PURE__ */ jsx116(Stack8, { children: !selectedCategory ? /* @__PURE__ */ jsx116(Stack8, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx116(
@@ -20921,7 +21366,7 @@ var arraysEqual = (a, b) => {
 var SelectPopover_default = SelectPopover;
 
 // src/components/input/ItemSelector.tsx
-import { Fragment as Fragment21, jsx as jsx118, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx118, jsxs as jsxs55 } from "react/jsx-runtime";
 var ItemSelector = function ItemSelector2({
   items,
   selectedItems,
@@ -21005,7 +21450,7 @@ var ItemSelector = function ItemSelector2({
     const selectedItem = selectedItems[0]?.id;
     return selectedItem ? [selectedItem] : "";
   };
-  return /* @__PURE__ */ jsxs55(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs55(Fragment22, { children: [
     /* @__PURE__ */ jsx118(
       Select_default,
       {
@@ -21022,7 +21467,7 @@ var ItemSelector = function ItemSelector2({
         renderValue: (value) => {
           let component;
           if (!value || !Array.isArray(value) || value.length === 0) {
-            component = /* @__PURE__ */ jsxs55(Fragment21, { children: [
+            component = /* @__PURE__ */ jsxs55(Fragment22, { children: [
               /* @__PURE__ */ jsx118(
                 Stack_default,
                 {
@@ -21042,7 +21487,7 @@ var ItemSelector = function ItemSelector2({
               )
             ] });
           } else {
-            component = /* @__PURE__ */ jsxs55(Fragment21, { children: [
+            component = /* @__PURE__ */ jsxs55(Fragment22, { children: [
               /* @__PURE__ */ jsxs55(
                 Stack_default,
                 {
@@ -21066,7 +21511,7 @@ var ItemSelector = function ItemSelector2({
                           }
                         },
                         id
-                      ) : /* @__PURE__ */ jsx118(Fragment21, {});
+                      ) : /* @__PURE__ */ jsx118(Fragment22, {});
                     }),
                     value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx118(
                       Tooltip_default,
@@ -21096,7 +21541,7 @@ var ItemSelector = function ItemSelector2({
                                   item
                                 },
                                 id
-                              ) : /* @__PURE__ */ jsx118(Fragment21, {});
+                              ) : /* @__PURE__ */ jsx118(Fragment22, {});
                             })
                           }
                         ),
@@ -21224,7 +21669,7 @@ var map = {
 var toDiacriticInsensitiveString = (input) => Array.from(input).map((char) => map[char] ? `[${map[char]}]` : char).join("");
 
 // src/components/input/Autocomplete.tsx
-import { Fragment as Fragment22, jsx as jsx119, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx119, jsxs as jsxs56 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var Autocomplete = function Autocomplete2({
   variant = "default",
@@ -21441,7 +21886,7 @@ var Autocomplete = function Autocomplete2({
       option.id
     );
   };
-  return /* @__PURE__ */ jsxs56(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs56(Fragment23, { children: [
     /* @__PURE__ */ jsx119(
       DebouncedTextField_default,
       {
@@ -21831,7 +22276,7 @@ var CodeEditor_default = React64.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
-import { Fragment as Fragment23, jsx as jsx121, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx121, jsxs as jsxs57 } from "react/jsx-runtime";
 var FORMAT_CHARACTERS_LINE = 120;
 var FORMAT_NUMBER_SPACES_INDENTATION = 2;
 var CodeEditorPopup = ({
@@ -21874,7 +22319,7 @@ var CodeEditorPopup = ({
     " ".repeat(FORMAT_NUMBER_SPACES_INDENTATION),
     FORMAT_CHARACTERS_LINE
   );
-  return /* @__PURE__ */ jsxs57(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment24, { children: [
     readonly && /* @__PURE__ */ jsx121(
       Dialog_default,
       {
@@ -22040,7 +22485,7 @@ var CodeEditorPopup = ({
 var CodeEditorPopup_default = CodeEditorPopup;
 
 // src/components/input/TextEditor.tsx
-import { Fragment as Fragment24, jsx as jsx122, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx122, jsxs as jsxs58 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR_INSERT_MENU_ITEMS = [
   "link",
   "image",
@@ -22332,7 +22777,7 @@ var TextEditor = function TextEditor2({
         };
     }
   };
-  return /* @__PURE__ */ jsxs58(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs58(Fragment25, { children: [
     /* @__PURE__ */ jsx122(
       Editor,
       {
@@ -22389,20 +22834,18 @@ var TextEditor_default = TextEditor;
 
 // src/components/input/TimeField.tsx
 import * as React67 from "react";
-import {
-  TimeField as MuiTimeField
-} from "@mui/x-date-pickers";
+import { TimeField as MuiTimeField } from "@mui/x-date-pickers";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { tz as tz6 } from "moment-timezone";
 import { jsx as jsx123 } from "react/jsx-runtime";
 var ExtendedTextField = ({
-  inputProps: { ref: inputRef },
+  inputProps,
   ownerState,
   InputProps,
   error,
   ...rest
-}) => /* @__PURE__ */ jsx123(TextField_default, { ref: inputRef, ...rest });
+}) => /* @__PURE__ */ jsx123(TextField_default, { ...inputProps, ...rest });
 var TimeField = function TimeField2({
   onChange,
   value,
@@ -22442,7 +22885,8 @@ var TimeField = function TimeField2({
       },
       slotProps: {
         textField: rest
-      }
+      },
+      enableAccessibleFieldDOMStructure: false
     }
   ) });
 };
@@ -22450,7 +22894,7 @@ var TimeField_default = TimeField;
 
 // src/components/input/PhoneField.tsx
 import * as React68 from "react";
-import { Fragment as Fragment25, jsx as jsx124, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx124, jsxs as jsxs59 } from "react/jsx-runtime";
 var maxPhoneLengthWithPrefix = 16;
 var PhoneField = React68.forwardRef(function PhoneField2({
   value,
@@ -22535,7 +22979,7 @@ var PhoneField = React68.forwardRef(function PhoneField2({
       groupElements: true,
       ...rest,
       className: `Cn-PhoneField ${className}`,
-      startAdornment: /* @__PURE__ */ jsxs59(Fragment25, { children: [
+      startAdornment: /* @__PURE__ */ jsxs59(Fragment26, { children: [
         rest.startAdornment,
         select
       ] }),
@@ -22969,7 +23413,7 @@ var DatePickerPopover = ({
 var DatePickerPopover_default = DatePickerPopover;
 
 // src/components/input/DatePicker.tsx
-import { Fragment as Fragment26, jsx as jsx128, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx128, jsxs as jsxs62 } from "react/jsx-runtime";
 var DatePicker = React71.forwardRef(
   function DatePicker2({ value, onChange, onBlur, onKeyDown, minDate, maxDate, ...rest }, ref) {
     const { locale, timezone } = React71.useContext(IntlContext);
@@ -23045,7 +23489,7 @@ var DatePicker = React71.forwardRef(
       const text = value && !isNaN(value.getTime()) ? tz8(value, timezone).format(dateInputFormat) : "";
       setTextValue(text);
     }, [dateInputFormat, timezone, value]);
-    return /* @__PURE__ */ jsxs62(Fragment26, { children: [
+    return /* @__PURE__ */ jsxs62(Fragment27, { children: [
       /* @__PURE__ */ jsx128(
         TextField_default,
         {
@@ -23088,7 +23532,7 @@ var DatePicker_default = DatePicker;
 // src/components/input/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox";
 import { FormControlLabel, FormGroup } from "@mui/material";
-import { Fragment as Fragment27, jsx as jsx129, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx129, jsxs as jsxs63 } from "react/jsx-runtime";
 var MaterialCheckbox = ({
   checked,
   disabled,
@@ -23121,7 +23565,7 @@ var Checkbox = ({
   inputClass,
   onChange,
   tabIndex
-}) => /* @__PURE__ */ jsxs63(Fragment27, { children: [
+}) => /* @__PURE__ */ jsxs63(Fragment28, { children: [
   !label && /* @__PURE__ */ jsx129(
     MaterialCheckbox,
     {
@@ -23163,7 +23607,7 @@ var Checkbox_default = Checkbox;
 import * as React72 from "react";
 import MuiRadio from "@mui/material/Radio";
 import { FormControlLabel as FormControlLabel2 } from "@mui/material";
-import { Fragment as Fragment28, jsx as jsx130, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx130, jsxs as jsxs64 } from "react/jsx-runtime";
 var Radio = React72.forwardRef(function Radio2({
   label,
   labelPlacement = "end",
@@ -23200,7 +23644,7 @@ var Radio = React72.forwardRef(function Radio2({
       size: size === "S" ? "small" : "medium"
     }
   );
-  return /* @__PURE__ */ jsxs64(Fragment28, { children: [
+  return /* @__PURE__ */ jsxs64(Fragment29, { children: [
     !label && radio,
     label && /* @__PURE__ */ jsx130(
       FormControlLabel2,
@@ -23650,9 +24094,9 @@ var Loader_default = Loader;
 // src/components/markdown/MarkdownRenderer.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { styled as styled9 } from "@mui/material/styles";
+import { styled as styled8 } from "@mui/material/styles";
 import { jsx as jsx136 } from "react/jsx-runtime";
-var MarkdownContainer = styled9("div")(
+var MarkdownContainer = styled8("div")(
   ({ color: color2, backgroundColor: backgroundColor2 = "transparent", variant }) => ({
     color: color2,
     backgroundColor: backgroundColor2,
@@ -23719,7 +24163,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment29, jsx as jsx137, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx137, jsxs as jsxs68 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -23727,7 +24171,7 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs68(Fragment29, { children: [
+}) => /* @__PURE__ */ jsxs68(Fragment30, { children: [
   /* @__PURE__ */ jsxs68(
     Box_default,
     {
@@ -23950,7 +24394,7 @@ var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
 import * as React77 from "react";
-import { Fragment as Fragment30, jsx as jsx141, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx141, jsxs as jsxs70 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -23991,7 +24435,7 @@ var DonutFocusOverlay = ({
   const internalTopHalfCircle = `${internalCircleRadius} ${internalCircleRadius} 0 0 1 ${startPointX + donutWidth + internalCircleRadius * 2} ${startPointY}`;
   const externalTopHalfCircle = `${externalCircleRadius} ${externalCircleRadius} 0 0 0 ${startPointX} ${startPointY}`;
   const path = `path("M ${startPointX} ${startPointY} A ${externalBottomHalfCircle} m ${-donutWidth} 0 A ${internalBottomHalfCircle} A ${internalTopHalfCircle} m ${donutWidth} 0 A ${externalTopHalfCircle} Z")`;
-  return /* @__PURE__ */ jsxs70(Fragment30, { children: [
+  return /* @__PURE__ */ jsxs70(Fragment31, { children: [
     /* @__PURE__ */ jsx141(
       Box_default,
       {
@@ -24036,7 +24480,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment31, jsx as jsx142, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx142, jsxs as jsxs71 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -24062,7 +24506,7 @@ var Pager = ({
         sx: { minWidth: 78 }
       }
     ),
-    allowedPageSizes && /* @__PURE__ */ jsxs71(Fragment31, { children: [
+    allowedPageSizes && /* @__PURE__ */ jsxs71(Fragment32, { children: [
       /* @__PURE__ */ jsx142(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
       /* @__PURE__ */ jsx142(
         Select_default,
@@ -24457,10 +24901,120 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import MuiTabs from "@mui/material/Tabs";
-import SwipeableViews from "react-swipeable-views";
-import { jsx as jsx148, jsxs as jsxs74 } from "react/jsx-runtime";
+
+// src/components/layout/SwipeableViews.tsx
+import * as React80 from "react";
+import { useEffect as useEffect21, useRef as useRef21, useState as useState31 } from "react";
+import { jsx as jsx148 } from "react/jsx-runtime";
+var styles = {
+  container: {
+    maxHeight: "100%",
+    display: "flex",
+    scrollSnapType: "x mandatory",
+    overflowX: "scroll",
+    scrollBehavior: "smooth",
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    "&::WebkitScrollbar": {
+      /* Chrome, Safari and Opera */
+      display: "none"
+    }
+  },
+  slide: {
+    boxSizing: "border-box",
+    width: "100%",
+    flexShrink: 0,
+    scrollSnapAlign: "center",
+    scrollSnapStop: "always"
+  }
+};
+function SwipeableViews({
+  className = "",
+  index,
+  style: style3,
+  slideStyle,
+  onChangeIndex,
+  children,
+  ...rootProps
+}) {
+  const containerRef = useRef21(null);
+  const scrollTimeout = useRef21();
+  const scrollingMethod = useRef21("none");
+  const [previousIndex, setPreviousIndex] = useState31(index);
+  useEffect21(() => {
+    if (containerRef.current) {
+      if (scrollingMethod.current === "manual") {
+        scrollingMethod.current = "none";
+        return;
+      }
+      scrollingMethod.current = "auto";
+      const children2 = containerRef.current.children;
+      let scrollPosition = 0;
+      for (let i = 0; i < index; i++) {
+        scrollPosition += children2[i].getBoundingClientRect().width;
+      }
+      if (scrollTimeout.current) {
+        clearTimeout(scrollTimeout.current);
+      }
+      const container = containerRef.current;
+      let animationFrame;
+      const checkScrollCompletion = () => {
+        if (Math.abs(container.scrollLeft - scrollPosition) < 1) {
+          setPreviousIndex(index);
+          cancelAnimationFrame(animationFrame);
+        } else {
+          animationFrame = requestAnimationFrame(
+            checkScrollCompletion
+          );
+        }
+      };
+      container.scrollTo({
+        left: scrollPosition,
+        behavior: "smooth"
+      });
+      animationFrame = requestAnimationFrame(checkScrollCompletion);
+      return () => cancelAnimationFrame(animationFrame);
+    }
+  }, [index]);
+  return /* @__PURE__ */ jsx148(
+    "div",
+    {
+      ...rootProps,
+      ref: containerRef,
+      style: Object.assign({}, styles.container, style3),
+      className,
+      onScroll: ({ currentTarget }) => {
+        if (scrollTimeout.current) {
+          clearTimeout(scrollTimeout.current);
+        }
+        scrollTimeout.current = window.setTimeout(() => {
+          if (scrollingMethod.current === "auto") {
+            scrollingMethod.current = "none";
+            return;
+          }
+          scrollingMethod.current = "manual";
+          const pageWidth = currentTarget.scrollWidth / currentTarget.children.length;
+          onChangeIndex(
+            Math.round(currentTarget.scrollLeft / pageWidth)
+          );
+        }, 100);
+      },
+      children: React80.Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx148(
+        "div",
+        {
+          className: "Slim-Vertical-Scroll",
+          style: Object.assign({}, styles.slide, slideStyle),
+          children: childIndex === index || childIndex === previousIndex ? child : null
+        }
+      ))
+    }
+  );
+}
+
+// src/components/tab/Tabs.tsx
+import { jsx as jsx149, jsxs as jsxs74 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -24471,7 +25025,7 @@ var Tabs = ({
   contained = false,
   scrollbarGutter
 }) => {
-  const [value, setValue] = React80.useState(0);
+  const [value, setValue] = React81.useState(0);
   const handleChangeIndex = (index) => {
     onChangeTab?.(index);
     setValue(index);
@@ -24496,7 +25050,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx148(
+        /* @__PURE__ */ jsx149(
           MuiTabs,
           {
             value: currentTabIndex ?? value,
@@ -24522,7 +25076,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx148(
+        /* @__PURE__ */ jsx149(
           Box_default,
           {
             sx: {
@@ -24531,7 +25085,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx148(
+            children: /* @__PURE__ */ jsx149(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -24541,21 +25095,12 @@ var Tabs = ({
                     height: "100%"
                   }
                 },
-                containerStyle: {
-                  transition: "transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s",
-                  // NOTE: This will be a workaround for the issue with the SwipeableViews blurring
-                  willChange: "unset",
-                  ...fullHeight && {
-                    height: "100%"
-                  }
-                },
                 slideStyle: {
                   ...fullHeight && {
                     height: "100%"
                   },
                   scrollbarGutter
                 },
-                slideClassName: "Slim-Vertical-Scroll",
                 children
               }
             )
@@ -24568,8 +25113,8 @@ var Tabs = ({
 var Tabs_default = Tabs;
 
 // src/components/tab/TabContent.tsx
-import { jsx as jsx149 } from "react/jsx-runtime";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx149(
+import { jsx as jsx150 } from "react/jsx-runtime";
+var TabContent = ({ children }) => /* @__PURE__ */ jsx150(
   Box_default,
   {
     sx: {
@@ -24586,8 +25131,8 @@ import {
   TableRow as MuiTableRow,
   TableCell as MuiTableCell
 } from "@mui/material";
-import { jsx as jsx150 } from "react/jsx-runtime";
-var TableDivider = () => /* @__PURE__ */ jsx150(MuiTableRow, { children: /* @__PURE__ */ jsx150(
+import { jsx as jsx151 } from "react/jsx-runtime";
+var TableDivider = () => /* @__PURE__ */ jsx151(MuiTableRow, { children: /* @__PURE__ */ jsx151(
   MuiTableCell,
   {
     colSpan: 1e3,
@@ -24600,8 +25145,8 @@ var TableDivider_default = TableDivider;
 import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { jsx as jsx151 } from "react/jsx-runtime";
-var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx151(MuiTableSortLabel, { ...rest, children });
+import { jsx as jsx152 } from "react/jsx-runtime";
+var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx152(MuiTableSortLabel, { ...rest, children });
 var TableSortLabel_default = TableSortLabel;
 
 // src/components/table/Table.tsx
@@ -24609,21 +25154,21 @@ import {
   TableContainer,
   Table as MuiTable
 } from "@mui/material";
-import { jsx as jsx152 } from "react/jsx-runtime";
-var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx152(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx152(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+import { jsx as jsx153 } from "react/jsx-runtime";
+var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx153(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx153(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
 var Table_default = Table;
 
 // src/components/table/TableBody.tsx
 import { TableBody as MuiTableBody } from "@mui/material";
-import { jsx as jsx153 } from "react/jsx-runtime";
-var TableBody = ({ children }) => /* @__PURE__ */ jsx153(MuiTableBody, { children });
+import { jsx as jsx154 } from "react/jsx-runtime";
+var TableBody = ({ children }) => /* @__PURE__ */ jsx154(MuiTableBody, { children });
 var TableBody_default = TableBody;
 
 // src/components/table/TableCell.tsx
 import {
   TableCell as MuiTableCell2
 } from "@mui/material";
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   size = "M",
@@ -24634,7 +25179,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx154(
+}) => /* @__PURE__ */ jsx155(
   MuiTableCell2,
   {
     ...rest,
@@ -24658,12 +25203,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React81 from "react";
-import { jsx as jsx155 } from "react/jsx-runtime";
+import * as React82 from "react";
+import { jsx as jsx156 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React81.useState(false);
-  const [showIcon, setShowIcon] = React81.useState(false);
+  const [isCopied, setIsCopied] = React82.useState(false);
+  const [showIcon, setShowIcon] = React82.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(text);
     if (isCopied) {
@@ -24677,7 +25222,7 @@ var TableCellCopy = ({ text, ...rest }) => {
   const getIconId = () => !isCopied ? "content-copy" : "check";
   const iconHiddenClass = "icon-hidden";
   const iconCopiedClass = "icon-copied";
-  return /* @__PURE__ */ jsx155(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx155(
+  return /* @__PURE__ */ jsx156(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx156(
     Stack_default,
     {
       direction: "row",
@@ -24686,7 +25231,7 @@ var TableCellCopy = ({ text, ...rest }) => {
       onMouseEnter: () => setShowIcon(true),
       onMouseLeave: () => setShowIcon(false),
       onClick: manageButtonClicked,
-      children: /* @__PURE__ */ jsx155(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx155(
+      children: /* @__PURE__ */ jsx156(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx156(
         Button_default,
         {
           className: isCopied ? iconCopiedClass : !showIcon ? iconHiddenClass : "",
@@ -24716,21 +25261,21 @@ var TableCellCopy_default = TableCellCopy;
 
 // src/components/table/TableHead.tsx
 import { TableHead as MuiTableHead } from "@mui/material";
-import { jsx as jsx156 } from "react/jsx-runtime";
-var TableHead = ({ children }) => /* @__PURE__ */ jsx156(MuiTableHead, { children });
+import { jsx as jsx157 } from "react/jsx-runtime";
+var TableHead = ({ children }) => /* @__PURE__ */ jsx157(MuiTableHead, { children });
 var TableHead_default = TableHead;
 
 // src/components/table/TableRow.tsx
 import {
   TableRow as MuiTableRow2
 } from "@mui/material";
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 var TableRow = ({
   children,
   isFollowedByNestedTable = false,
   fadeInLeftAnimation = false,
   sx
-}) => /* @__PURE__ */ jsx157(
+}) => /* @__PURE__ */ jsx158(
   MuiTableRow2,
   {
     className: `${isFollowedByNestedTable ? "Followed-By-Nested-Table" : ""} ${fadeInLeftAnimation ? "animated fadeInLeft" : ""}`,
@@ -24742,14 +25287,14 @@ var TableRow_default = TableRow;
 
 // src/components/table/NestedTable.tsx
 import { Collapse as Collapse7 } from "@mui/material";
-import { jsx as jsx158 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 var NestedTable = ({
   colSpan,
   children,
   className = "",
   sx,
   isVisible = true
-}) => /* @__PURE__ */ jsx158(TableRow_default, { children: /* @__PURE__ */ jsx158(
+}) => /* @__PURE__ */ jsx159(TableRow_default, { children: /* @__PURE__ */ jsx159(
   TableCell_default,
   {
     colSpan,
@@ -24758,14 +25303,14 @@ var NestedTable = ({
       height: "auto",
       ...!isVisible && { borderBottom: "none" }
     },
-    children: /* @__PURE__ */ jsx158(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx158(Box_default, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx158(Paper_default, { children: /* @__PURE__ */ jsx158(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
+    children: /* @__PURE__ */ jsx159(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx159(Box_default, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx159(Paper_default, { children: /* @__PURE__ */ jsx159(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
   }
 ) });
 var NestedTable_default = NestedTable;
 
 // src/components/toolbar/ToolbarBreadcrumb.tsx
-import { jsx as jsx159 } from "react/jsx-runtime";
-var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx159(
+import { jsx as jsx160 } from "react/jsx-runtime";
+var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx160(
   Stack_default,
   {
     direction: "row",
@@ -24775,7 +25320,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx159(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx159(
+          /* @__PURE__ */ jsx160(
             Typography_default,
             {
               color: grey500,
@@ -24798,10 +25343,10 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React82 from "react";
-import { jsx as jsx160 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React82.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx160(
+import * as React83 from "react";
+import { jsx as jsx161 } from "react/jsx-runtime";
+var ToolbarBreadcrumbButton = React83.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx161(
     ButtonBase5,
     {
       className: `Cn-ToolbarBreadcrumbButton ${className}`,
@@ -24820,14 +25365,14 @@ var ToolbarBreadcrumbButton = React82.forwardRef(function ToolbarBreadcrumbButto
         }
       },
       ...rest,
-      children: /* @__PURE__ */ jsx160(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
+      children: /* @__PURE__ */ jsx161(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
     }
   );
 });
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx161, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs75 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -24868,7 +25413,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx161(
+            leftActions && /* @__PURE__ */ jsx162(
               Box_default,
               {
                 className: `Cn-Toolbar-left`,
@@ -24878,7 +25423,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx161(
+            /* @__PURE__ */ jsx162(
               Box_default,
               {
                 className: `Cn-Toolbar-children`,
@@ -24893,7 +25438,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx161(
+      rightActions && /* @__PURE__ */ jsx162(
         Box_default,
         {
           className: `Cn-Toolbar-right`,
@@ -24912,19 +25457,19 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React83 from "react";
-import { useState as useState33 } from "react";
-import { jsx as jsx162, jsxs as jsxs76 } from "react/jsx-runtime";
-var ToolbarTitle = React83.forwardRef(function ToolbarTitle2({
+import * as React84 from "react";
+import { useState as useState34 } from "react";
+import { jsx as jsx163, jsxs as jsxs76 } from "react/jsx-runtime";
+var ToolbarTitle = React84.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React83.useRef(null);
-  const [showHoverActions, setShowHoverActions] = useState33(false);
-  return /* @__PURE__ */ jsx162(Box_default, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx162(
+  const textElementRef = React84.useRef(null);
+  const [showHoverActions, setShowHoverActions] = useState34(false);
+  return /* @__PURE__ */ jsx163(Box_default, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx163(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
@@ -24947,7 +25492,7 @@ var ToolbarTitle = React83.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx162(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx163(
               Box_default,
               {
                 sx: {
@@ -24976,13 +25521,13 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx163, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs77 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
   items = [],
   onClick
-}) => /* @__PURE__ */ jsx163(
+}) => /* @__PURE__ */ jsx164(
   ButtonBase6,
   {
     tabIndex: onClick ? 0 : -1,
@@ -25008,7 +25553,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx163(
+          groupLabel && /* @__PURE__ */ jsx164(
             Typography_default,
             {
               variant: "overline",
@@ -25040,7 +25585,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx163(
+                    iconColor && /* @__PURE__ */ jsx164(
                       Icon_default,
                       {
                         id: iconId,
@@ -25051,7 +25596,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx163(
+                    label && /* @__PURE__ */ jsx164(
                       Typography_default,
                       {
                         variant: "caption",
@@ -25060,7 +25605,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx163(
+                    value && /* @__PURE__ */ jsx164(
                       Typography_default,
                       {
                         sx: style3,
@@ -25069,7 +25614,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx163(
+                    incrementLabelValue && /* @__PURE__ */ jsx164(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -25095,8 +25640,8 @@ var WidgetLegendItem_default = WidgetLegendItem;
 
 // src/components/widget/Widget.tsx
 import MuiCard2 from "@mui/material/Card";
-import { jsx as jsx164 } from "react/jsx-runtime";
-var Widget = ({ children }) => /* @__PURE__ */ jsx164(
+import { jsx as jsx165 } from "react/jsx-runtime";
+var Widget = ({ children }) => /* @__PURE__ */ jsx165(
   MuiCard2,
   {
     variant: "elevation",
@@ -25120,8 +25665,8 @@ var Widget = ({ children }) => /* @__PURE__ */ jsx164(
 var Widget_default = Widget;
 
 // src/components/widget/WidgetActions.tsx
-import { jsx as jsx165 } from "react/jsx-runtime";
-var WidgetActions = ({ children }) => /* @__PURE__ */ jsx165(
+import { jsx as jsx166 } from "react/jsx-runtime";
+var WidgetActions = ({ children }) => /* @__PURE__ */ jsx166(
   Box_default,
   {
     sx: {
@@ -25135,8 +25680,8 @@ var WidgetActions = ({ children }) => /* @__PURE__ */ jsx165(
 var WidgetActions_default = WidgetActions;
 
 // src/components/widget/WidgetTitle.tsx
-import { jsx as jsx166 } from "react/jsx-runtime";
-var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx166(
+import { jsx as jsx167 } from "react/jsx-runtime";
+var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx167(
   Box_default,
   {
     sx: {
@@ -25146,7 +25691,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx166(
+    children: /* @__PURE__ */ jsx167(
       Typography_default,
       {
         variant: "subtitle2",
@@ -25160,18 +25705,18 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       }
     )
   }
-) : /* @__PURE__ */ jsx166("span", {});
+) : /* @__PURE__ */ jsx167("span", {});
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React84 from "react";
-import { Fragment as Fragment32, jsx as jsx167, jsxs as jsxs78 } from "react/jsx-runtime";
+import * as React85 from "react";
+import { Fragment as Fragment33, jsx as jsx168, jsxs as jsxs78 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
   L: 500,
   XL: 600
 };
-var styles = {
+var styles2 = {
   backgroundColor: dark900,
   color: "white",
   borderRadius: "16px",
@@ -25190,7 +25735,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React85.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -25205,17 +25750,17 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React84.useRef(null);
-  const windowRef = React84.useRef(null);
-  const headerRef = React84.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React84.useState(false);
-  const diffRef = React84.useRef({ x: 0, y: 0 });
-  React84.useImperativeHandle(ref, () => ({
+  const overlayRef = React85.useRef(null);
+  const windowRef = React85.useRef(null);
+  const headerRef = React85.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React85.useState(false);
+  const diffRef = React85.useRef({ x: 0, y: 0 });
+  React85.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React84.useEffect(() => {
+  React85.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");
@@ -25277,8 +25822,8 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
       }
     }, 750);
   };
-  return /* @__PURE__ */ jsxs78(Fragment32, { children: [
-    isDraggingState && /* @__PURE__ */ jsx167(
+  return /* @__PURE__ */ jsxs78(Fragment33, { children: [
+    isDraggingState && /* @__PURE__ */ jsx168(
       Box_default,
       {
         sx: {
@@ -25294,7 +25839,7 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx167(
+    /* @__PURE__ */ jsx168(
       Box_default,
       {
         ref: overlayRef,
@@ -25315,7 +25860,7 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
           Stack_default,
           {
             sx: {
-              ...styles,
+              ...styles2,
               ...sx
             },
             ref: windowRef,
@@ -25336,19 +25881,19 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
                   onMouseDown: handleMouseDown,
                   minHeight: "44px",
                   children: [
-                    /* @__PURE__ */ jsx167(
+                    /* @__PURE__ */ jsx168(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
-                        children: showBackButton && /* @__PURE__ */ jsx167(
+                        children: showBackButton && /* @__PURE__ */ jsx168(
                           Tooltip_default,
                           {
                             title: t("MINIMIZABLE_WINDOW.GO_BACK"),
                             zIndex: 999999,
                             placement: "top",
-                            children: /* @__PURE__ */ jsx167(
+                            children: /* @__PURE__ */ jsx168(
                               IconButton_default,
                               {
                                 size: "S",
@@ -25361,7 +25906,7 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx167(
+                    /* @__PURE__ */ jsx168(
                       Box_default,
                       {
                         sx: {
@@ -25369,7 +25914,7 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
                           left: "50%",
                           transform: "translateX(-50%)"
                         },
-                        children: typeof title === "string" ? /* @__PURE__ */ jsx167(Typography_default, { children: title }) : title
+                        children: typeof title === "string" ? /* @__PURE__ */ jsx168(Typography_default, { children: title }) : title
                       }
                     ),
                     /* @__PURE__ */ jsxs78(
@@ -25379,13 +25924,13 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
-                          /* @__PURE__ */ jsx167(Box_default, { children: /* @__PURE__ */ jsx167(
+                          /* @__PURE__ */ jsx168(Box_default, { children: /* @__PURE__ */ jsx168(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx167(
+                              children: /* @__PURE__ */ jsx168(
                                 IconButton_default,
                                 {
                                   size: "S",
@@ -25401,13 +25946,13 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
                               )
                             }
                           ) }),
-                          closeable && /* @__PURE__ */ jsx167(Box_default, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx167(
+                          closeable && /* @__PURE__ */ jsx168(Box_default, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx168(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx167(
+                              children: /* @__PURE__ */ jsx168(
                                 IconButton_default,
                                 {
                                   size: "S",
@@ -25424,7 +25969,7 @@ var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx167(
+              /* @__PURE__ */ jsx168(
                 Stack_default,
                 {
                   sx: {
@@ -25690,9 +26235,18 @@ react-is/cjs/react-is.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 
-@mui/styled-engine/index.js:
+@mui/styled-engine/esm/index.js:
+  (**
+   * @mui/styled-engine v7.2.0
+   *
+   * @license MIT
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+
+@mui/system/esm/index.js:
   (**
-   * @mui/styled-engine v5.16.14
+   * @mui/system v7.2.0
    *
    * @license MIT
    * This source code is licensed under the MIT license found in the