@openk9ui/openk9-chatbot 3.1.1-SNAPSHOT → 2026.1.1-SNAPSHOT

package/dist/SingleMessage-C_7JbDIL.js

@@ -0,0 +1,4463 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styled$2 from "@emotion/styled";
+import { useTheme, Box, CircularProgress, Typography, Chip, IconButton } from "@mui/material";
+import Markdown from "react-markdown";
+import { Translate } from "./components/Translate.js";
+import * as React from "react";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { unstable_createGetCssVar, createSpacing as createSpacing$1, unstable_memoTheme } from "@mui/system";
+import { isValidElementType, Memo, ForwardRef } from "react-is";
+import "@emotion/react";
+function isPlainObject(item) {
+  if (typeof item !== "object" || item === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(item);
+  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
+}
+function deepClone(source) {
+  if (/* @__PURE__ */ React.isValidElement(source) || isValidElementType(source) || !isPlainObject(source)) {
+    return source;
+  }
+  const output = {};
+  Object.keys(source).forEach((key) => {
+    output[key] = deepClone(source[key]);
+  });
+  return output;
+}
+function deepmerge(target, source, options = {
+  clone: true
+}) {
+  const output = options.clone ? {
+    ...target
+  } : target;
+  if (isPlainObject(target) && isPlainObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (/* @__PURE__ */ React.isValidElement(source[key]) || isValidElementType(source[key])) {
+        output[key] = source[key];
+      } else if (isPlainObject(source[key]) && // Avoid prototype pollution
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
+        output[key] = deepmerge(target[key], source[key], options);
+      } else if (options.clone) {
+        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
+      } else {
+        output[key] = source[key];
+      }
+    });
+  }
+  return output;
+}
+function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach((arg) => url.searchParams.append("args[]", arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
+}
+function getFunctionComponentName(Component, fallback = "") {
+  return Component.displayName || Component.name || fallback;
+}
+function getWrappedName(outerType, innerType, wrapperName) {
+  const functionName = getFunctionComponentName(innerType);
+  return outerType.displayName || (functionName !== "" ? `${wrapperName}(${functionName})` : wrapperName);
+}
+function getDisplayName(Component) {
+  if (Component == null) {
+    return void 0;
+  }
+  if (typeof Component === "string") {
+    return Component;
+  }
+  if (typeof Component === "function") {
+    return getFunctionComponentName(Component, "Component");
+  }
+  if (typeof Component === "object") {
+    switch (Component.$$typeof) {
+      case ForwardRef:
+        return getWrappedName(Component, Component.render, "ForwardRef");
+      case Memo:
+        return getWrappedName(Component, Component.type, "memo");
+      default:
+        return void 0;
+    }
+  }
+  return void 0;
+}
+function capitalize(string) {
+  if (typeof string !== "string") {
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `capitalize(string)` expects a string argument." : formatMuiErrorMessage(7));
+  }
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+function resolveProps(defaultProps, props) {
+  const output = {
+    ...props
+  };
+  for (const key in defaultProps) {
+    if (Object.prototype.hasOwnProperty.call(defaultProps, key)) {
+      const propName = key;
+      if (propName === "components" || propName === "slots") {
+        output[propName] = {
+          ...defaultProps[propName],
+          ...output[propName]
+        };
+      } else if (propName === "componentsProps" || propName === "slotProps") {
+        const defaultSlotProps = defaultProps[propName];
+        const slotProps = props[propName];
+        if (!slotProps) {
+          output[propName] = defaultSlotProps || {};
+        } else if (!defaultSlotProps) {
+          output[propName] = slotProps;
+        } else {
+          output[propName] = {
+            ...slotProps
+          };
+          for (const slotKey in defaultSlotProps) {
+            if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
+              const slotPropName = slotKey;
+              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+            }
+          }
+        }
+      } else if (output[propName] === void 0) {
+        output[propName] = defaultProps[propName];
+      }
+    }
+  }
+  return output;
+}
+function composeClasses(slots, getUtilityClass, classes = void 0) {
+  const output = {};
+  for (const slotName in slots) {
+    const slot = slots[slotName];
+    let buffer = "";
+    let start = true;
+    for (let i = 0; i < slot.length; i += 1) {
+      const value = slot[i];
+      if (value) {
+        buffer += (start === true ? "" : " ") + getUtilityClass(value);
+        start = false;
+        if (classes && classes[value]) {
+          buffer += " " + classes[value];
+        }
+      }
+    }
+    output[slotName] = buffer;
+  }
+  return output;
+}
+const defaultGenerator = (componentName) => componentName;
+const createClassNameGenerator = () => {
+  let generate = defaultGenerator;
+  return {
+    configure(generator) {
+      generate = generator;
+    },
+    generate(componentName) {
+      return generate(componentName);
+    },
+    reset() {
+      generate = defaultGenerator;
+    }
+  };
+};
+const ClassNameGenerator = createClassNameGenerator();
+const globalStateClasses = {
+  active: "active",
+  checked: "checked",
+  completed: "completed",
+  disabled: "disabled",
+  error: "error",
+  expanded: "expanded",
+  focused: "focused",
+  focusVisible: "focusVisible",
+  open: "open",
+  readOnly: "readOnly",
+  required: "required",
+  selected: "selected"
+};
+function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
+  const globalStateClass = globalStateClasses[slot];
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
+}
+function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
+  const result = {};
+  slots.forEach((slot) => {
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+  });
+  return result;
+}
+function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+  return Math.max(min, Math.min(val, max));
+}
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+function merge(acc, item) {
+  if (!item) {
+    return acc;
+  }
+  return deepmerge(acc, item, {
+    clone: false
+    // No need to clone deep, it's way faster.
+  });
+}
+const responsivePropType = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
+function sortContainerQueries(theme, css) {
+  if (!theme.containerQueries) {
+    return css;
+  }
+  const sorted = Object.keys(css).filter((key) => key.startsWith("@container")).sort((a, b) => {
+    var _a, _b;
+    const regex = /min-width:\s*([0-9.]+)/;
+    return +(((_a = a.match(regex)) == null ? void 0 : _a[1]) || 0) - +(((_b = b.match(regex)) == null ? void 0 : _b[1]) || 0);
+  });
+  if (!sorted.length) {
+    return css;
+  }
+  return sorted.reduce((acc, key) => {
+    const value = css[key];
+    delete acc[key];
+    acc[key] = value;
+    return acc;
+  }, {
+    ...css
+  });
+}
+function isCqShorthand(breakpointKeys, value) {
+  return value === "@" || value.startsWith("@") && (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+}
+function getContainerQuery(theme, shorthand) {
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
+  if (!matches) {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error(process.env.NODE_ENV !== "production" ? `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 theme.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
+  };
+}
+const values = {
+  xs: 0,
+  // phone
+  sm: 600,
+  // tablet
+  md: 900,
+  // small laptop
+  lg: 1200,
+  // desktop
+  xl: 1536
+  // large screen
+};
+const defaultBreakpoints = {
+  // Sorted ASC by size. That's important.
+  // It can't be configured as it's used statically for propTypes.
+  keys: ["xs", "sm", "md", "lg", "xl"],
+  up: (key) => `@media (min-width:${values[key]}px)`
+};
+const 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 theme = props.theme || {};
+  if (Array.isArray(propValue)) {
+    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
+    return propValue.reduce((acc, item, index) => {
+      acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
+      return acc;
+    }, {});
+  }
+  if (typeof propValue === "object") {
+    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
+    return Object.keys(propValue).reduce((acc, breakpoint) => {
+      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+        const containerKey = getContainerQuery(theme.containerQueries ? theme : 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 {
+        const cssKey = breakpoint;
+        acc[cssKey] = propValue[cssKey];
+      }
+      return acc;
+    }, {});
+  }
+  const output = styleFromPropValue(propValue);
+  return output;
+}
+function createEmptyBreakpointObject(breakpointsInput = {}) {
+  var _a;
+  const breakpointsInOrder = (_a = breakpointsInput.keys) == null ? void 0 : _a.reduce((acc, key) => {
+    const breakpointStyleKey = breakpointsInput.up(key);
+    acc[breakpointStyleKey] = {};
+    return acc;
+  }, {});
+  return breakpointsInOrder || {};
+}
+function removeUnusedBreakpoints(breakpointKeys, style2) {
+  return breakpointKeys.reduce((acc, key) => {
+    const breakpointOutput = acc[key];
+    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
+    if (isBreakpointUnused) {
+      delete acc[key];
+    }
+    return acc;
+  }, style2);
+}
+function getPath(obj, path, checkVars = true) {
+  if (!path || typeof path !== "string") {
+    return null;
+  }
+  if (obj && obj.vars && checkVars) {
+    const val = `vars.${path}`.split(".").reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+    if (val != null) {
+      return val;
+    }
+  }
+  return path.split(".").reduce((acc, item) => {
+    if (acc && acc[item] != null) {
+      return acc[item];
+    }
+    return null;
+  }, obj);
+}
+function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+  let value;
+  if (typeof themeMapping === "function") {
+    value = themeMapping(propValueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[propValueFinal] || userValue;
+  } else {
+    value = getPath(themeMapping, propValueFinal) || userValue;
+  }
+  if (transform) {
+    value = transform(value, userValue, themeMapping);
+  }
+  return value;
+}
+function style$1(options) {
+  const {
+    prop,
+    cssProperty = options.prop,
+    themeKey,
+    transform
+  } = options;
+  const fn = (props) => {
+    if (props[prop] == null) {
+      return null;
+    }
+    const propValue = props[prop];
+    const theme = props.theme;
+    const themeMapping = getPath(theme, themeKey) || {};
+    const styleFromPropValue = (propValueFinal) => {
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === "string") {
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
+    };
+    return handleBreakpoints(props, propValue, styleFromPropValue);
+  };
+  fn.propTypes = process.env.NODE_ENV !== "production" ? {
+    [prop]: responsivePropType
+  } : {};
+  fn.filterProps = [prop];
+  return fn;
+}
+function memoize$1(fn) {
+  const cache = {};
+  return (arg) => {
+    if (cache[arg] === void 0) {
+      cache[arg] = fn(arg);
+    }
+    return cache[arg];
+  };
+}
+const properties = {
+  m: "margin",
+  p: "padding"
+};
+const directions = {
+  t: "Top",
+  r: "Right",
+  b: "Bottom",
+  l: "Left",
+  x: ["Left", "Right"],
+  y: ["Top", "Bottom"]
+};
+const aliases = {
+  marginX: "mx",
+  marginY: "my",
+  paddingX: "px",
+  paddingY: "py"
+};
+const getCssProperties = memoize$1((prop) => {
+  if (prop.length > 2) {
+    if (aliases[prop]) {
+      prop = aliases[prop];
+    } else {
+      return [prop];
+    }
+  }
+  const [a, b] = prop.split("");
+  const property = properties[a];
+  const direction = directions[b] || "";
+  return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction];
+});
+const marginKeys = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"];
+const paddingKeys = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
+const spacingKeys = [...marginKeys, ...paddingKeys];
+function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
+  if (typeof themeSpacing === "number" || typeof themeSpacing === "string") {
+    return (val) => {
+      if (typeof val === "string") {
+        return val;
+      }
+      if (process.env.NODE_ENV !== "production") {
+        if (typeof val !== "number") {
+          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${val}.`);
+        }
+      }
+      if (typeof themeSpacing === "string") {
+        return `calc(${val} * ${themeSpacing})`;
+      }
+      return themeSpacing * val;
+    };
+  }
+  if (Array.isArray(themeSpacing)) {
+    return (val) => {
+      if (typeof val === "string") {
+        return val;
+      }
+      const abs = Math.abs(val);
+      if (process.env.NODE_ENV !== "production") {
+        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"));
+        } else if (abs > themeSpacing.length - 1) {
+          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"));
+        }
+      }
+      const transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
+      }
+      if (typeof transformed === "number") {
+        return -transformed;
+      }
+      return `-${transformed}`;
+    };
+  }
+  if (typeof themeSpacing === "function") {
+    return themeSpacing;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, "It should be a number, an array or a function."].join("\n"));
+  }
+  return () => void 0;
+}
+function createUnarySpacing(theme) {
+  return createUnaryUnit(theme, "spacing", 8, "spacing");
+}
+function getValue(transformer, propValue) {
+  if (typeof propValue === "string" || propValue == null) {
+    return propValue;
+  }
+  return transformer(propValue);
+}
+function getStyleFromPropValue(cssProperties, transformer) {
+  return (propValue) => cssProperties.reduce((acc, cssProperty) => {
+    acc[cssProperty] = getValue(transformer, propValue);
+    return acc;
+  }, {});
+}
+function resolveCssProperty(props, keys, prop, transformer) {
+  if (!keys.includes(prop)) {
+    return null;
+  }
+  const cssProperties = getCssProperties(prop);
+  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+  const propValue = props[prop];
+  return handleBreakpoints(props, propValue, styleFromPropValue);
+}
+function style(props, keys) {
+  const transformer = createUnarySpacing(props.theme);
+  return Object.keys(props).map((prop) => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
+}
+function margin(props) {
+  return style(props, marginKeys);
+}
+margin.propTypes = process.env.NODE_ENV !== "production" ? marginKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
+  return obj;
+}, {}) : {};
+margin.filterProps = marginKeys;
+function padding(props) {
+  return style(props, paddingKeys);
+}
+padding.propTypes = process.env.NODE_ENV !== "production" ? paddingKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
+  return obj;
+}, {}) : {};
+padding.filterProps = paddingKeys;
+process.env.NODE_ENV !== "production" ? spacingKeys.reduce((obj, key) => {
+  obj[key] = responsivePropType;
+  return obj;
+}, {}) : {};
+function compose(...styles) {
+  const handlers = styles.reduce((acc, style2) => {
+    style2.filterProps.forEach((prop) => {
+      acc[prop] = style2;
+    });
+    return acc;
+  }, {});
+  const fn = (props) => {
+    return Object.keys(props).reduce((acc, prop) => {
+      if (handlers[prop]) {
+        return merge(acc, handlers[prop](props));
+      }
+      return acc;
+    }, {});
+  };
+  fn.propTypes = process.env.NODE_ENV !== "production" ? styles.reduce((acc, style2) => Object.assign(acc, style2.propTypes), {}) : {};
+  fn.filterProps = styles.reduce((acc, style2) => acc.concat(style2.filterProps), []);
+  return fn;
+}
+function borderTransform(value) {
+  if (typeof value !== "number") {
+    return value;
+  }
+  return `${value}px solid`;
+}
+function createBorderStyle(prop, transform) {
+  return style$1({
+    prop,
+    themeKey: "borders",
+    transform
+  });
+}
+const border = createBorderStyle("border", borderTransform);
+const borderTop = createBorderStyle("borderTop", borderTransform);
+const borderRight = createBorderStyle("borderRight", borderTransform);
+const borderBottom = createBorderStyle("borderBottom", borderTransform);
+const borderLeft = createBorderStyle("borderLeft", borderTransform);
+const borderColor = createBorderStyle("borderColor");
+const borderTopColor = createBorderStyle("borderTopColor");
+const borderRightColor = createBorderStyle("borderRightColor");
+const borderBottomColor = createBorderStyle("borderBottomColor");
+const borderLeftColor = createBorderStyle("borderLeftColor");
+const outline = createBorderStyle("outline", borderTransform);
+const outlineColor = createBorderStyle("outlineColor");
+const borderRadius = (props) => {
+  if (props.borderRadius !== void 0 && props.borderRadius !== null) {
+    const transformer = createUnaryUnit(props.theme, "shape.borderRadius", 4, "borderRadius");
+    const styleFromPropValue = (propValue) => ({
+      borderRadius: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
+  }
+  return null;
+};
+borderRadius.propTypes = process.env.NODE_ENV !== "production" ? {
+  borderRadius: responsivePropType
+} : {};
+borderRadius.filterProps = ["borderRadius"];
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
+const gap = (props) => {
+  if (props.gap !== void 0 && props.gap !== null) {
+    const transformer = createUnaryUnit(props.theme, "spacing", 8, "gap");
+    const styleFromPropValue = (propValue) => ({
+      gap: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.gap, styleFromPropValue);
+  }
+  return null;
+};
+gap.propTypes = process.env.NODE_ENV !== "production" ? {
+  gap: responsivePropType
+} : {};
+gap.filterProps = ["gap"];
+const columnGap = (props) => {
+  if (props.columnGap !== void 0 && props.columnGap !== null) {
+    const transformer = createUnaryUnit(props.theme, "spacing", 8, "columnGap");
+    const styleFromPropValue = (propValue) => ({
+      columnGap: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
+  }
+  return null;
+};
+columnGap.propTypes = process.env.NODE_ENV !== "production" ? {
+  columnGap: responsivePropType
+} : {};
+columnGap.filterProps = ["columnGap"];
+const rowGap = (props) => {
+  if (props.rowGap !== void 0 && props.rowGap !== null) {
+    const transformer = createUnaryUnit(props.theme, "spacing", 8, "rowGap");
+    const styleFromPropValue = (propValue) => ({
+      rowGap: getValue(transformer, propValue)
+    });
+    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
+  }
+  return null;
+};
+rowGap.propTypes = process.env.NODE_ENV !== "production" ? {
+  rowGap: responsivePropType
+} : {};
+rowGap.filterProps = ["rowGap"];
+const gridColumn = style$1({
+  prop: "gridColumn"
+});
+const gridRow = style$1({
+  prop: "gridRow"
+});
+const gridAutoFlow = style$1({
+  prop: "gridAutoFlow"
+});
+const gridAutoColumns = style$1({
+  prop: "gridAutoColumns"
+});
+const gridAutoRows = style$1({
+  prop: "gridAutoRows"
+});
+const gridTemplateColumns = style$1({
+  prop: "gridTemplateColumns"
+});
+const gridTemplateRows = style$1({
+  prop: "gridTemplateRows"
+});
+const gridTemplateAreas = style$1({
+  prop: "gridTemplateAreas"
+});
+const gridArea = style$1({
+  prop: "gridArea"
+});
+compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
+function paletteTransform(value, userValue) {
+  if (userValue === "grey") {
+    return userValue;
+  }
+  return value;
+}
+const color = style$1({
+  prop: "color",
+  themeKey: "palette",
+  transform: paletteTransform
+});
+const bgcolor = style$1({
+  prop: "bgcolor",
+  cssProperty: "backgroundColor",
+  themeKey: "palette",
+  transform: paletteTransform
+});
+const backgroundColor = style$1({
+  prop: "backgroundColor",
+  themeKey: "palette",
+  transform: paletteTransform
+});
+compose(color, bgcolor, backgroundColor);
+function sizingTransform(value) {
+  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
+}
+const width = style$1({
+  prop: "width",
+  transform: sizingTransform
+});
+const maxWidth = (props) => {
+  if (props.maxWidth !== void 0 && props.maxWidth !== null) {
+    const styleFromPropValue = (propValue) => {
+      var _a, _b, _c, _d, _e;
+      const breakpoint = ((_c = (_b = (_a = props.theme) == null ? void 0 : _a.breakpoints) == null ? void 0 : _b.values) == null ? void 0 : _c[propValue]) || values[propValue];
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue)
+        };
+      }
+      if (((_e = (_d = props.theme) == null ? void 0 : _d.breakpoints) == null ? void 0 : _e.unit) !== "px") {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+        };
+      }
+      return {
+        maxWidth: breakpoint
+      };
+    };
+    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
+  }
+  return null;
+};
+maxWidth.filterProps = ["maxWidth"];
+const minWidth = style$1({
+  prop: "minWidth",
+  transform: sizingTransform
+});
+const height = style$1({
+  prop: "height",
+  transform: sizingTransform
+});
+const maxHeight = style$1({
+  prop: "maxHeight",
+  transform: sizingTransform
+});
+const minHeight = style$1({
+  prop: "minHeight",
+  transform: sizingTransform
+});
+style$1({
+  prop: "size",
+  cssProperty: "width",
+  transform: sizingTransform
+});
+style$1({
+  prop: "size",
+  cssProperty: "height",
+  transform: sizingTransform
+});
+const boxSizing = style$1({
+  prop: "boxSizing"
+});
+compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
+const defaultSxConfig = {
+  // borders
+  border: {
+    themeKey: "borders",
+    transform: borderTransform
+  },
+  borderTop: {
+    themeKey: "borders",
+    transform: borderTransform
+  },
+  borderRight: {
+    themeKey: "borders",
+    transform: borderTransform
+  },
+  borderBottom: {
+    themeKey: "borders",
+    transform: borderTransform
+  },
+  borderLeft: {
+    themeKey: "borders",
+    transform: borderTransform
+  },
+  borderColor: {
+    themeKey: "palette"
+  },
+  borderTopColor: {
+    themeKey: "palette"
+  },
+  borderRightColor: {
+    themeKey: "palette"
+  },
+  borderBottomColor: {
+    themeKey: "palette"
+  },
+  borderLeftColor: {
+    themeKey: "palette"
+  },
+  outline: {
+    themeKey: "borders",
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: "palette"
+  },
+  borderRadius: {
+    themeKey: "shape.borderRadius",
+    style: borderRadius
+  },
+  // palette
+  color: {
+    themeKey: "palette",
+    transform: paletteTransform
+  },
+  bgcolor: {
+    themeKey: "palette",
+    cssProperty: "backgroundColor",
+    transform: paletteTransform
+  },
+  backgroundColor: {
+    themeKey: "palette",
+    transform: paletteTransform
+  },
+  // spacing
+  p: {
+    style: padding
+  },
+  pt: {
+    style: padding
+  },
+  pr: {
+    style: padding
+  },
+  pb: {
+    style: padding
+  },
+  pl: {
+    style: padding
+  },
+  px: {
+    style: padding
+  },
+  py: {
+    style: padding
+  },
+  padding: {
+    style: padding
+  },
+  paddingTop: {
+    style: padding
+  },
+  paddingRight: {
+    style: padding
+  },
+  paddingBottom: {
+    style: padding
+  },
+  paddingLeft: {
+    style: padding
+  },
+  paddingX: {
+    style: padding
+  },
+  paddingY: {
+    style: padding
+  },
+  paddingInline: {
+    style: padding
+  },
+  paddingInlineStart: {
+    style: padding
+  },
+  paddingInlineEnd: {
+    style: padding
+  },
+  paddingBlock: {
+    style: padding
+  },
+  paddingBlockStart: {
+    style: padding
+  },
+  paddingBlockEnd: {
+    style: padding
+  },
+  m: {
+    style: margin
+  },
+  mt: {
+    style: margin
+  },
+  mr: {
+    style: margin
+  },
+  mb: {
+    style: margin
+  },
+  ml: {
+    style: margin
+  },
+  mx: {
+    style: margin
+  },
+  my: {
+    style: margin
+  },
+  margin: {
+    style: margin
+  },
+  marginTop: {
+    style: margin
+  },
+  marginRight: {
+    style: margin
+  },
+  marginBottom: {
+    style: margin
+  },
+  marginLeft: {
+    style: margin
+  },
+  marginX: {
+    style: margin
+  },
+  marginY: {
+    style: margin
+  },
+  marginInline: {
+    style: margin
+  },
+  marginInlineStart: {
+    style: margin
+  },
+  marginInlineEnd: {
+    style: margin
+  },
+  marginBlock: {
+    style: margin
+  },
+  marginBlockStart: {
+    style: margin
+  },
+  marginBlockEnd: {
+    style: margin
+  },
+  // display
+  displayPrint: {
+    cssProperty: false,
+    transform: (value) => ({
+      "@media print": {
+        display: value
+      }
+    })
+  },
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {
+    style: gap
+  },
+  rowGap: {
+    style: rowGap
+  },
+  columnGap: {
+    style: columnGap
+  },
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {
+    themeKey: "zIndex"
+  },
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {
+    themeKey: "shadows"
+  },
+  // sizing
+  width: {
+    transform: sizingTransform
+  },
+  maxWidth: {
+    style: maxWidth
+  },
+  minWidth: {
+    transform: sizingTransform
+  },
+  height: {
+    transform: sizingTransform
+  },
+  maxHeight: {
+    transform: sizingTransform
+  },
+  minHeight: {
+    transform: sizingTransform
+  },
+  boxSizing: {},
+  // typography
+  font: {
+    themeKey: "font"
+  },
+  fontFamily: {
+    themeKey: "typography"
+  },
+  fontSize: {
+    themeKey: "typography"
+  },
+  fontStyle: {
+    themeKey: "typography"
+  },
+  fontWeight: {
+    themeKey: "typography"
+  },
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {
+    cssProperty: false,
+    themeKey: "typography"
+  }
+};
+function objectsHaveSameKeys(...objects) {
+  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
+  const union = new Set(allKeys);
+  return objects.every((object) => union.size === Object.keys(object).length);
+}
+function callIfFn(maybeFn, arg) {
+  return typeof maybeFn === "function" ? maybeFn(arg) : maybeFn;
+}
+function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
+      theme
+    };
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style: style2
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    if (themeKey === "typography" && val === "inherit") {
+      return {
+        [prop]: val
+      };
+    }
+    const themeMapping = getPath(theme, themeKey) || {};
+    if (style2) {
+      return style2(props);
+    }
+    const styleFromPropValue = (propValueFinal) => {
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === "string") {
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
+    };
+    return handleBreakpoints(props, val, styleFromPropValue);
+  }
+  function styleFunctionSx2(props) {
+    const {
+      sx,
+      theme = {},
+      nested
+    } = props || {};
+    if (!sx) {
+      return null;
+    }
+    const config = theme.unstable_sxConfig ?? defaultSxConfig;
+    function traverse(sxInput) {
+      let sxObject = sxInput;
+      if (typeof sxInput === "function") {
+        sxObject = sxInput(theme);
+      } else if (typeof sxInput !== "object") {
+        return sxInput;
+      }
+      if (!sxObject) {
+        return null;
+      }
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+      const breakpointsKeys = Object.keys(emptyBreakpoints);
+      let css = emptyBreakpoints;
+      Object.keys(sxObject).forEach((styleKey) => {
+        const value = callIfFn(sxObject[styleKey], theme);
+        if (value !== null && value !== void 0) {
+          if (typeof value === "object") {
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
+            } else {
+              const breakpointsValues = handleBreakpoints({
+                theme
+              }, value, (x) => ({
+                [styleKey]: x
+              }));
+              if (objectsHaveSameKeys(breakpointsValues, value)) {
+                css[styleKey] = styleFunctionSx2({
+                  sx: value,
+                  theme,
+                  nested: true
+                });
+              } else {
+                css = merge(css, breakpointsValues);
+              }
+            }
+          } else {
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
+          }
+        }
+      });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          "@layer sx": sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css))
+        };
+      }
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
+    }
+    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+  }
+  return styleFunctionSx2;
+}
+const styleFunctionSx = unstable_createStyleFunctionSx();
+styleFunctionSx.filterProps = ["sx"];
+function clampWrapper(value, min = 0, max = 1) {
+  if (process.env.NODE_ENV !== "production") {
+    if (value < min || value > max) {
+      console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
+    }
+  }
+  return clamp(value, min, max);
+}
+function hexToRgb$1(color2) {
+  color2 = color2.slice(1);
+  const re = new RegExp(`.{1,${color2.length >= 6 ? 2 : 1}}`, "g");
+  let colors = color2.match(re);
+  if (colors && colors[0].length === 1) {
+    colors = colors.map((n) => n + n);
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (color2.length !== color2.trim().length) {
+      console.error(`MUI: The color: "${color2}" is invalid. Make sure the color input doesn't contain leading/trailing space.`);
+    }
+  }
+  return colors ? `rgb${colors.length === 4 ? "a" : ""}(${colors.map((n, index) => {
+    return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1e3) / 1e3;
+  }).join(", ")})` : "";
+}
+function decomposeColor(color2) {
+  if (color2.type) {
+    return color2;
+  }
+  if (color2.charAt(0) === "#") {
+    return decomposeColor(hexToRgb$1(color2));
+  }
+  const marker = color2.indexOf("(");
+  const type = color2.substring(0, marker);
+  if (!["rgb", "rgba", "hsl", "hsla", "color"].includes(type)) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color2}\` color.
+The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage(9, color2));
+  }
+  let values2 = color2.substring(marker + 1, color2.length - 1);
+  let colorSpace;
+  if (type === "color") {
+    values2 = values2.split(" ");
+    colorSpace = values2.shift();
+    if (values2.length === 4 && values2[3].charAt(0) === "/") {
+      values2[3] = values2[3].slice(1);
+    }
+    if (!["srgb", "display-p3", "a98-rgb", "prophoto-rgb", "rec-2020"].includes(colorSpace)) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
+The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage(10, colorSpace));
+    }
+  } else {
+    values2 = values2.split(",");
+  }
+  values2 = values2.map((value) => parseFloat(value));
+  return {
+    type,
+    values: values2,
+    colorSpace
+  };
+}
+const colorChannel = (color2) => {
+  const decomposedColor = decomposeColor(color2);
+  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.includes("hsl") && idx !== 0 ? `${val}%` : val).join(" ");
+};
+const private_safeColorChannel = (color2, warning) => {
+  try {
+    return colorChannel(color2);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== "production") {
+      console.warn(warning);
+    }
+    return color2;
+  }
+};
+function recomposeColor(color2) {
+  const {
+    type,
+    colorSpace
+  } = color2;
+  let {
+    values: values2
+  } = color2;
+  if (type.includes("rgb")) {
+    values2 = values2.map((n, i) => i < 3 ? parseInt(n, 10) : n);
+  } else if (type.includes("hsl")) {
+    values2[1] = `${values2[1]}%`;
+    values2[2] = `${values2[2]}%`;
+  }
+  if (type.includes("color")) {
+    values2 = `${colorSpace} ${values2.join(" ")}`;
+  } else {
+    values2 = `${values2.join(", ")}`;
+  }
+  return `${type}(${values2})`;
+}
+function hslToRgb(color2) {
+  color2 = decomposeColor(color2);
+  const {
+    values: values2
+  } = color2;
+  const h = values2[0];
+  const s = values2[1] / 100;
+  const l = values2[2] / 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  let type = "rgb";
+  const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+  if (color2.type === "hsla") {
+    type += "a";
+    rgb.push(values2[3]);
+  }
+  return recomposeColor({
+    type,
+    values: rgb
+  });
+}
+function getLuminance(color2) {
+  color2 = decomposeColor(color2);
+  let rgb = color2.type === "hsl" || color2.type === "hsla" ? decomposeColor(hslToRgb(color2)).values : color2.values;
+  rgb = rgb.map((val) => {
+    if (color2.type !== "color") {
+      val /= 255;
+    }
+    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
+  });
+  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
+}
+function getContrastRatio(foreground, background) {
+  const lumA = getLuminance(foreground);
+  const lumB = getLuminance(background);
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+}
+function alpha(color2, value) {
+  color2 = decomposeColor(color2);
+  value = clampWrapper(value);
+  if (color2.type === "rgb" || color2.type === "hsl") {
+    color2.type += "a";
+  }
+  if (color2.type === "color") {
+    color2.values[3] = `/${value}`;
+  } else {
+    color2.values[3] = value;
+  }
+  return recomposeColor(color2);
+}
+function private_safeAlpha(color2, value, warning) {
+  try {
+    return alpha(color2, value);
+  } catch (error) {
+    return color2;
+  }
+}
+function darken(color2, coefficient) {
+  color2 = decomposeColor(color2);
+  coefficient = clampWrapper(coefficient);
+  if (color2.type.includes("hsl")) {
+    color2.values[2] *= 1 - coefficient;
+  } else if (color2.type.includes("rgb") || color2.type.includes("color")) {
+    for (let i = 0; i < 3; i += 1) {
+      color2.values[i] *= 1 - coefficient;
+    }
+  }
+  return recomposeColor(color2);
+}
+function private_safeDarken(color2, coefficient, warning) {
+  try {
+    return darken(color2, coefficient);
+  } catch (error) {
+    return color2;
+  }
+}
+function lighten(color2, coefficient) {
+  color2 = decomposeColor(color2);
+  coefficient = clampWrapper(coefficient);
+  if (color2.type.includes("hsl")) {
+    color2.values[2] += (100 - color2.values[2]) * coefficient;
+  } else if (color2.type.includes("rgb")) {
+    for (let i = 0; i < 3; i += 1) {
+      color2.values[i] += (255 - color2.values[i]) * coefficient;
+    }
+  } else if (color2.type.includes("color")) {
+    for (let i = 0; i < 3; i += 1) {
+      color2.values[i] += (1 - color2.values[i]) * coefficient;
+    }
+  }
+  return recomposeColor(color2);
+}
+function private_safeLighten(color2, coefficient, warning) {
+  try {
+    return lighten(color2, coefficient);
+  } catch (error) {
+    return color2;
+  }
+}
+function emphasize(color2, coefficient = 0.15) {
+  return getLuminance(color2) > 0.5 ? darken(color2, coefficient) : lighten(color2, coefficient);
+}
+function private_safeEmphasize(color2, coefficient, warning) {
+  try {
+    return emphasize(color2, coefficient);
+  } catch (error) {
+    return color2;
+  }
+}
+const common = {
+  black: "#000",
+  white: "#fff"
+};
+const grey = {
+  50: "#fafafa",
+  100: "#f5f5f5",
+  200: "#eeeeee",
+  300: "#e0e0e0",
+  400: "#bdbdbd",
+  500: "#9e9e9e",
+  600: "#757575",
+  700: "#616161",
+  800: "#424242",
+  900: "#212121",
+  A100: "#f5f5f5",
+  A200: "#eeeeee",
+  A400: "#bdbdbd",
+  A700: "#616161"
+};
+const purple = {
+  50: "#f3e5f5",
+  200: "#ce93d8",
+  300: "#ba68c8",
+  400: "#ab47bc",
+  500: "#9c27b0",
+  700: "#7b1fa2"
+};
+const red = {
+  300: "#e57373",
+  400: "#ef5350",
+  500: "#f44336",
+  700: "#d32f2f",
+  800: "#c62828"
+};
+const orange = {
+  300: "#ffb74d",
+  400: "#ffa726",
+  500: "#ff9800",
+  700: "#f57c00",
+  900: "#e65100"
+};
+const blue = {
+  50: "#e3f2fd",
+  200: "#90caf9",
+  400: "#42a5f5",
+  700: "#1976d2",
+  800: "#1565c0"
+};
+const lightBlue = {
+  300: "#4fc3f7",
+  400: "#29b6f6",
+  500: "#03a9f4",
+  700: "#0288d1",
+  900: "#01579b"
+};
+const green = {
+  300: "#81c784",
+  400: "#66bb6a",
+  500: "#4caf50",
+  700: "#388e3c",
+  800: "#2e7d32",
+  900: "#1b5e20"
+};
+function getLight() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: "rgba(0, 0, 0, 0.87)",
+      // Secondary text.
+      secondary: "rgba(0, 0, 0, 0.6)",
+      // Disabled text have even lower visual prominence.
+      disabled: "rgba(0, 0, 0, 0.38)"
+    },
+    // The color used to divide different elements.
+    divider: "rgba(0, 0, 0, 0.12)",
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: common.white,
+      default: common.white
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: "rgba(0, 0, 0, 0.54)",
+      // The color of an hovered action.
+      hover: "rgba(0, 0, 0, 0.04)",
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: "rgba(0, 0, 0, 0.08)",
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: "rgba(0, 0, 0, 0.26)",
+      // The background color of a disabled action.
+      disabledBackground: "rgba(0, 0, 0, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(0, 0, 0, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    }
+  };
+}
+const light = getLight();
+function getDark() {
+  return {
+    text: {
+      primary: common.white,
+      secondary: "rgba(255, 255, 255, 0.7)",
+      disabled: "rgba(255, 255, 255, 0.5)",
+      icon: "rgba(255, 255, 255, 0.5)"
+    },
+    divider: "rgba(255, 255, 255, 0.12)",
+    background: {
+      paper: "#121212",
+      default: "#121212"
+    },
+    action: {
+      active: common.white,
+      hover: "rgba(255, 255, 255, 0.08)",
+      hoverOpacity: 0.08,
+      selected: "rgba(255, 255, 255, 0.16)",
+      selectedOpacity: 0.16,
+      disabled: "rgba(255, 255, 255, 0.3)",
+      disabledBackground: "rgba(255, 255, 255, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(255, 255, 255, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  };
+}
+const dark = getDark();
+function addLightOrDark(intent, direction, shade, tonalOffset) {
+  const tonalOffsetLight = tonalOffset.light || tonalOffset;
+  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === "light") {
+      intent.light = lighten(intent.main, tonalOffsetLight);
+    } else if (direction === "dark") {
+      intent.dark = darken(intent.main, tonalOffsetDark);
+    }
+  }
+}
+function getDefaultPrimary(mode = "light") {
+  if (mode === "dark") {
+    return {
+      main: blue[200],
+      light: blue[50],
+      dark: blue[400]
+    };
+  }
+  return {
+    main: blue[700],
+    light: blue[400],
+    dark: blue[800]
+  };
+}
+function getDefaultSecondary(mode = "light") {
+  if (mode === "dark") {
+    return {
+      main: purple[200],
+      light: purple[50],
+      dark: purple[400]
+    };
+  }
+  return {
+    main: purple[500],
+    light: purple[300],
+    dark: purple[700]
+  };
+}
+function getDefaultError(mode = "light") {
+  if (mode === "dark") {
+    return {
+      main: red[500],
+      light: red[300],
+      dark: red[700]
+    };
+  }
+  return {
+    main: red[700],
+    light: red[400],
+    dark: red[800]
+  };
+}
+function getDefaultInfo(mode = "light") {
+  if (mode === "dark") {
+    return {
+      main: lightBlue[400],
+      light: lightBlue[300],
+      dark: lightBlue[700]
+    };
+  }
+  return {
+    main: lightBlue[700],
+    light: lightBlue[500],
+    dark: lightBlue[900]
+  };
+}
+function getDefaultSuccess(mode = "light") {
+  if (mode === "dark") {
+    return {
+      main: green[400],
+      light: green[300],
+      dark: green[700]
+    };
+  }
+  return {
+    main: green[800],
+    light: green[500],
+    dark: green[900]
+  };
+}
+function getDefaultWarning(mode = "light") {
+  if (mode === "dark") {
+    return {
+      main: orange[400],
+      light: orange[300],
+      dark: orange[700]
+    };
+  }
+  return {
+    main: "#ed6c02",
+    // closest to orange[800] that pass 3:1.
+    light: orange[500],
+    dark: orange[900]
+  };
+}
+function createPalette(palette) {
+  const {
+    mode = "light",
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
+  const primary = palette.primary || getDefaultPrimary(mode);
+  const secondary = palette.secondary || getDefaultSecondary(mode);
+  const error = palette.error || getDefaultError(mode);
+  const info = palette.info || getDefaultInfo(mode);
+  const success = palette.success || getDefaultSuccess(mode);
+  const warning = palette.warning || getDefaultWarning(mode);
+  function getContrastText(background) {
+    const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
+    if (process.env.NODE_ENV !== "production") {
+      const contrast = getContrastRatio(background, contrastText);
+      if (contrast < 3) {
+        console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, "falls below the WCAG recommended absolute minimum contrast ratio of 3:1.", "https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast"].join("\n"));
+      }
+    }
+    return contrastText;
+  }
+  const augmentColor = ({
+    color: color2,
+    name,
+    mainShade = 500,
+    lightShade = 300,
+    darkShade = 700
+  }) => {
+    color2 = {
+      ...color2
+    };
+    if (!color2.main && color2[mainShade]) {
+      color2.main = color2[mainShade];
+    }
+    if (!color2.hasOwnProperty("main")) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ""} provided to augmentColor(color) is invalid.
+The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage(11, name ? ` (${name})` : "", mainShade));
+    }
+    if (typeof color2.main !== "string") {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ""} provided to augmentColor(color) is invalid.
+\`color.main\` should be a string, but \`${JSON.stringify(color2.main)}\` was provided instead.
+
+Did you intend to use one of the following approaches?
+
+import { green } from "@mui/material/colors";
+
+const theme1 = createTheme({ palette: {
+  primary: green,
+} });
+
+const theme2 = createTheme({ palette: {
+  primary: { main: green[500] },
+} });` : formatMuiErrorMessage(12, name ? ` (${name})` : "", JSON.stringify(color2.main)));
+    }
+    addLightOrDark(color2, "light", lightShade, tonalOffset);
+    addLightOrDark(color2, "dark", darkShade, tonalOffset);
+    if (!color2.contrastText) {
+      color2.contrastText = getContrastText(color2.main);
+    }
+    return color2;
+  };
+  let modeHydrated;
+  if (mode === "light") {
+    modeHydrated = getLight();
+  } else if (mode === "dark") {
+    modeHydrated = getDark();
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (!modeHydrated) {
+      console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
+    }
+  }
+  const paletteOutput = deepmerge({
+    // A collection of common colors.
+    common: {
+      ...common
+    },
+    // prevent mutable object.
+    // The palette mode, can be light or dark.
+    mode,
+    // The colors used to represent primary interface elements for a user.
+    primary: augmentColor({
+      color: primary,
+      name: "primary"
+    }),
+    // The colors used to represent secondary interface elements for a user.
+    secondary: augmentColor({
+      color: secondary,
+      name: "secondary",
+      mainShade: "A400",
+      lightShade: "A200",
+      darkShade: "A700"
+    }),
+    // The colors used to represent interface elements that the user should be made aware of.
+    error: augmentColor({
+      color: error,
+      name: "error"
+    }),
+    // The colors used to represent potentially dangerous actions or important messages.
+    warning: augmentColor({
+      color: warning,
+      name: "warning"
+    }),
+    // The colors used to present information to the user that is neutral and not necessarily important.
+    info: augmentColor({
+      color: info,
+      name: "info"
+    }),
+    // The colors used to indicate the successful completion of an action that user triggered.
+    success: augmentColor({
+      color: success,
+      name: "success"
+    }),
+    // The grey colors.
+    grey,
+    // Used by `getContrastText()` to maximize the contrast between
+    // the background and the text.
+    contrastThreshold,
+    // Takes a background color and returns the text color that maximizes the contrast.
+    getContrastText,
+    // Generate a rich color object.
+    augmentColor,
+    // Used by the functions below to shift a color's luminance by approximately
+    // two indexes within its tonal palette.
+    // E.g., shift from Red 500 to Red 300 or Red 700.
+    tonalOffset,
+    // The light and dark mode object.
+    ...modeHydrated
+  }, other);
+  return paletteOutput;
+}
+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);
+}
+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
+};
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+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;
+};
+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 keyframes = interpolation;
+      if (keyframes.anim === 1) {
+        cursor = {
+          name: keyframes.name,
+          styles: keyframes.styles,
+          next: cursor
+        };
+        return keyframes.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 styles = serializedStyles.styles + ";";
+        return styles;
+      }
+      return createStringFromObject(mergedProps, registered, interpolation);
+    }
+  }
+  var asString = interpolation;
+  {
+    return 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 (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+        if (Array.isArray(value) && typeof value[0] === "string" && registered == null) {
+          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 styles = "";
+  cursor = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+    styles += asTemplateStringsArr[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+    if (stringMode) {
+      var templateStringsArr = strings;
+      styles += templateStringsArr[i];
+    }
+  }
+  labelPattern.lastIndex = 0;
+  var identifierName = "";
+  var match;
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += "-" + match[1];
+  }
+  var name = murmur2(styles) + identifierName;
+  return {
+    name,
+    styles,
+    next: cursor
+  };
+}
+/**
+ * @mui/styled-engine v6.5.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.
+ */
+function styled$1(tag, options) {
+  const stylesFactory = styled$2(tag, options);
+  if (process.env.NODE_ENV !== "production") {
+    return (...styles) => {
+      const component = typeof tag === "string" ? `"${tag}"` : "component";
+      if (styles.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 (styles.some((style2) => style2 === void 0)) {
+        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
+      }
+      return stylesFactory(...styles);
+    };
+  }
+  return stylesFactory;
+}
+function internal_mutateStyles(tag, processor) {
+  if (Array.isArray(tag.__emotion_styles)) {
+    tag.__emotion_styles = processor(tag.__emotion_styles);
+  }
+}
+const wrapper = [];
+function internal_serializeStyles(styles) {
+  wrapper[0] = styles;
+  return serializeStyles(wrapper);
+}
+const PropsContext = /* @__PURE__ */ React.createContext(void 0);
+process.env.NODE_ENV !== "production" ? {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.object
+} : void 0;
+function getThemeProps(params) {
+  const {
+    theme,
+    name,
+    props
+  } = params;
+  if (!theme || !theme.components || !theme.components[name]) {
+    return props;
+  }
+  const config = theme.components[name];
+  if (config.defaultProps) {
+    return resolveProps(config.defaultProps, props);
+  }
+  if (!config.styleOverrides && !config.variants) {
+    return resolveProps(config, props);
+  }
+  return props;
+}
+function useDefaultProps$1({
+  props,
+  name
+}) {
+  const ctx = React.useContext(PropsContext);
+  return getThemeProps({
+    props,
+    name,
+    theme: {
+      components: ctx
+    }
+  });
+}
+const sortBreakpointsValues = (values2) => {
+  const breakpointsAsArray = Object.keys(values2).map((key) => ({
+    key,
+    val: values2[key]
+  })) || [];
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => {
+    return {
+      ...acc,
+      [obj.key]: obj.val
+    };
+  }, {});
+};
+function createBreakpoints(breakpoints) {
+  const {
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values: values2 = {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536
+      // large screen
+    },
+    unit = "px",
+    step = 5,
+    ...other
+  } = breakpoints;
+  const sortedValues = sortBreakpointsValues(values2);
+  const keys = Object.keys(sortedValues);
+  function up(key) {
+    const value = typeof values2[key] === "number" ? values2[key] : key;
+    return `@media (min-width:${value}${unit})`;
+  }
+  function down(key) {
+    const value = typeof values2[key] === "number" ? values2[key] : key;
+    return `@media (max-width:${value - step / 100}${unit})`;
+  }
+  function between(start, end) {
+    const endIndex = keys.indexOf(end);
+    return `@media (min-width:${typeof values2[start] === "number" ? values2[start] : start}${unit}) and (max-width:${(endIndex !== -1 && typeof values2[keys[endIndex]] === "number" ? values2[keys[endIndex]] : end) - step / 100}${unit})`;
+  }
+  function only(key) {
+    if (keys.indexOf(key) + 1 < keys.length) {
+      return between(key, keys[keys.indexOf(key) + 1]);
+    }
+    return up(key);
+  }
+  function not(key) {
+    const keyIndex = keys.indexOf(key);
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+    return between(key, keys[keys.indexOf(key) + 1]).replace("@media", "@media not all and");
+  }
+  return {
+    keys,
+    values: sortedValues,
+    up,
+    down,
+    between,
+    only,
+    not,
+    unit,
+    ...other
+  };
+}
+const shape = {
+  borderRadius: 4
+};
+function createSpacing(spacingInput = 8, transform = createUnarySpacing({
+  spacing: spacingInput
+})) {
+  if (spacingInput.mui) {
+    return spacingInput;
+  }
+  const spacing = (...argsInput) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!(argsInput.length <= 4)) {
+        console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
+      }
+    }
+    const args = argsInput.length === 0 ? [1] : argsInput;
+    return args.map((argument) => {
+      const output = transform(argument);
+      return typeof output === "number" ? `${output}px` : output;
+    }).join(" ");
+  };
+  spacing.mui = true;
+  return spacing;
+}
+function applyStyles(key, styles) {
+  var _a;
+  const theme = this;
+  if (theme.vars) {
+    if (!((_a = theme.colorSchemes) == null ? void 0 : _a[key]) || typeof theme.getColorSchemeSelector !== "function") {
+      return {};
+    }
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector === "&") {
+      return styles;
+    }
+    if (selector.includes("data-") || selector.includes(".")) {
+      selector = `*:where(${selector.replace(/\s*&$/, "")}) &`;
+    }
+    return {
+      [selector]: styles
+    };
+  }
+  if (theme.palette.mode === key) {
+    return styles;
+  }
+  return {};
+}
+function createTheme$1(options = {}, ...args) {
+  const {
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
+  const breakpoints = createBreakpoints(breakpointsInput);
+  const spacing = createSpacing(spacingInput);
+  let muiTheme = deepmerge({
+    breakpoints,
+    direction: "ltr",
+    components: {},
+    // Inject component definitions.
+    palette: {
+      mode: "light",
+      ...paletteInput
+    },
+    spacing,
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
+  }, other);
+  muiTheme = cssContainerQueries(muiTheme);
+  muiTheme.applyStyles = applyStyles;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other == null ? void 0 : other.unstable_sxConfig
+  };
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
+  return muiTheme;
+}
+const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+  let temp = obj;
+  keys.forEach((k, index) => {
+    if (index === keys.length - 1) {
+      if (Array.isArray(temp)) {
+        temp[Number(k)] = value;
+      } else if (temp && typeof temp === "object") {
+        temp[k] = value;
+      }
+    } else if (temp && typeof temp === "object") {
+      if (!temp[k]) {
+        temp[k] = arrayKeys.includes(k) ? [] : {};
+      }
+      temp = temp[k];
+    }
+  });
+};
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+  function recurse(object, parentKeys = [], arrayKeys = []) {
+    Object.entries(object).forEach(([key, value]) => {
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== void 0 && value !== null) {
+          if (typeof value === "object" && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
+          } else {
+            callback([...parentKeys, key], value, arrayKeys);
+          }
+        }
+      }
+    });
+  }
+  recurse(obj);
+};
+const getCssValue = (keys, value) => {
+  if (typeof value === "number") {
+    if (["lineHeight", "fontWeight", "opacity", "zIndex"].some((prop) => keys.includes(prop))) {
+      return value;
+    }
+    const lastKey = keys[keys.length - 1];
+    if (lastKey.toLowerCase().includes("opacity")) {
+      return value;
+    }
+    return `${value}px`;
+  }
+  return value;
+};
+function cssVarsParser(theme, options) {
+  const {
+    prefix,
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar2
+  } = options || {};
+  const css = {};
+  const vars = {};
+  const varsWithDefaults = {};
+  walkObjectDeep(
+    theme,
+    (keys, value, arrayKeys) => {
+      if (typeof value === "string" || typeof value === "number") {
+        if (!shouldSkipGeneratingVar2 || !shouldSkipGeneratingVar2(keys, value)) {
+          const cssVar = `--${prefix ? `${prefix}-` : ""}${keys.join("-")}`;
+          const resolvedValue = getCssValue(keys, value);
+          Object.assign(css, {
+            [cssVar]: resolvedValue
+          });
+          assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
+          assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${resolvedValue})`, arrayKeys);
+        }
+      }
+    },
+    (keys) => keys[0] === "vars"
+    // skip 'vars/*' paths
+  );
+  return {
+    css,
+    vars,
+    varsWithDefaults
+  };
+}
+function prepareCssVars(theme, parserConfig = {}) {
+  const {
+    getSelector = defaultGetSelector2,
+    disableCssColorScheme,
+    colorSchemeSelector: selector
+  } = parserConfig;
+  const {
+    colorSchemes = {},
+    components,
+    defaultColorScheme = "light",
+    ...otherTheme
+  } = theme;
+  const {
+    vars: rootVars,
+    css: rootCss,
+    varsWithDefaults: rootVarsWithDefaults
+  } = cssVarsParser(otherTheme, parserConfig);
+  let themeVars = rootVarsWithDefaults;
+  const colorSchemesMap = {};
+  const {
+    [defaultColorScheme]: defaultScheme,
+    ...otherColorSchemes
+  } = colorSchemes;
+  Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
+    const {
+      vars,
+      css,
+      varsWithDefaults
+    } = cssVarsParser(scheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap[key] = {
+      css,
+      vars
+    };
+  });
+  if (defaultScheme) {
+    const {
+      css,
+      vars,
+      varsWithDefaults
+    } = cssVarsParser(defaultScheme, parserConfig);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
+    colorSchemesMap[defaultColorScheme] = {
+      css,
+      vars
+    };
+  }
+  function defaultGetSelector2(colorScheme, cssObject) {
+    var _a, _b;
+    let rule = selector;
+    if (selector === "class") {
+      rule = ".%s";
+    }
+    if (selector === "data") {
+      rule = "[data-%s]";
+    }
+    if ((selector == null ? void 0 : selector.startsWith("data-")) && !selector.includes("%s")) {
+      rule = `[${selector}="%s"]`;
+    }
+    if (colorScheme) {
+      if (rule === "media") {
+        if (theme.defaultColorScheme === colorScheme) {
+          return ":root";
+        }
+        const mode = ((_b = (_a = colorSchemes[colorScheme]) == null ? void 0 : _a.palette) == null ? void 0 : _b.mode) || colorScheme;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ":root": cssObject
+          }
+        };
+      }
+      if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace("%s", String(colorScheme))}`;
+        }
+        return rule.replace("%s", String(colorScheme));
+      }
+    }
+    return ":root";
+  }
+  const generateThemeVars = () => {
+    let vars = {
+      ...rootVars
+    };
+    Object.entries(colorSchemesMap).forEach(([, {
+      vars: schemeVars
+    }]) => {
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  const generateStyleSheets = () => {
+    var _a, _b;
+    const stylesheets = [];
+    const colorScheme = theme.defaultColorScheme || "light";
+    function insertStyleSheet(key, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof key === "string" ? {
+          [key]: {
+            ...css
+          }
+        } : key);
+      }
+    }
+    insertStyleSheet(getSelector(void 0, {
+      ...rootCss
+    }), rootCss);
+    const {
+      [colorScheme]: defaultSchemeVal,
+      ...other
+    } = colorSchemesMap;
+    if (defaultSchemeVal) {
+      const {
+        css
+      } = defaultSchemeVal;
+      const cssColorSheme = (_b = (_a = colorSchemes[colorScheme]) == null ? void 0 : _a.palette) == null ? void 0 : _b.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(colorScheme, {
+        ...finalCss
+      }), finalCss);
+    }
+    Object.entries(other).forEach(([key, {
+      css
+    }]) => {
+      var _a2, _b2;
+      const cssColorSheme = (_b2 = (_a2 = colorSchemes[key]) == null ? void 0 : _a2.palette) == null ? void 0 : _b2.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(key, {
+        ...finalCss
+      }), finalCss);
+    });
+    return stylesheets;
+  };
+  return {
+    vars: themeVars,
+    generateThemeVars,
+    generateStyleSheets
+  };
+}
+function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach((entry) => {
+    const [key, value] = entry;
+    if (typeof value === "object") {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ""}${value.fontVariant ? `${value.fontVariant} ` : ""}${value.fontWeight ? `${value.fontWeight} ` : ""}${value.fontStretch ? `${value.fontStretch} ` : ""}${value.fontSize || ""}${value.lineHeight ? `/${value.lineHeight} ` : ""}${value.fontFamily || ""}`;
+    }
+  });
+  return vars;
+}
+function createGetColorSchemeSelector(selector) {
+  return function getColorSchemeSelector(colorScheme) {
+    if (selector === "media") {
+      if (process.env.NODE_ENV !== "production") {
+        if (colorScheme !== "light" && colorScheme !== "dark") {
+          console.error(`MUI: @media (prefers-color-scheme) supports only 'light' or 'dark', but receive '${colorScheme}'.`);
+        }
+      }
+      return `@media (prefers-color-scheme: ${colorScheme})`;
+    }
+    if (selector) {
+      if (selector.startsWith("data-") && !selector.includes("%s")) {
+        return `[${selector}="${colorScheme}"] &`;
+      }
+      if (selector === "class") {
+        return `.${colorScheme} &`;
+      }
+      if (selector === "data") {
+        return `[data-${colorScheme}] &`;
+      }
+      return `${selector.replace("%s", colorScheme)} &`;
+    }
+    return "&";
+  };
+}
+function createMixins(breakpoints, mixins) {
+  return {
+    toolbar: {
+      minHeight: 56,
+      [breakpoints.up("xs")]: {
+        "@media (orientation: landscape)": {
+          minHeight: 48
+        }
+      },
+      [breakpoints.up("sm")]: {
+        minHeight: 64
+      }
+    },
+    ...mixins
+  };
+}
+function round(value) {
+  return Math.round(value * 1e5) / 1e5;
+}
+const caseAllCaps = {
+  textTransform: "uppercase"
+};
+const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+function createTypography(palette, typography) {
+  const {
+    fontFamily = defaultFontFamily,
+    // The default font size of the Material Specification.
+    fontSize = 14,
+    // px
+    fontWeightLight = 300,
+    fontWeightRegular = 400,
+    fontWeightMedium = 500,
+    fontWeightBold = 700,
+    // Tell MUI what's the font-size on the html element.
+    // 16px is the default font-size used by browsers.
+    htmlFontSize = 16,
+    // Apply the CSS properties to all the variants.
+    allVariants,
+    pxToRem: pxToRem2,
+    ...other
+  } = typeof typography === "function" ? typography(palette) : typography;
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof fontSize !== "number") {
+      console.error("MUI: `fontSize` is required to be a number.");
+    }
+    if (typeof htmlFontSize !== "number") {
+      console.error("MUI: `htmlFontSize` is required to be a number.");
+    }
+  }
+  const coef = fontSize / 14;
+  const pxToRem = pxToRem2 || ((size) => `${size / htmlFontSize * coef}rem`);
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
+    fontFamily,
+    fontWeight,
+    fontSize: pxToRem(size),
+    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
+    lineHeight,
+    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
+    // across font-families can cause issues with the kerning.
+    ...fontFamily === defaultFontFamily ? {
+      letterSpacing: `${round(letterSpacing / size)}em`
+    } : {},
+    ...casing,
+    ...allVariants
+  });
+  const variants = {
+    h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
+    h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
+    h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
+    h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
+    h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
+    h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
+    subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
+    subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
+    body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
+    body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
+    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
+    caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
+    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
+    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
+    inherit: {
+      fontFamily: "inherit",
+      fontWeight: "inherit",
+      fontSize: "inherit",
+      lineHeight: "inherit",
+      letterSpacing: "inherit"
+    }
+  };
+  return deepmerge({
+    htmlFontSize,
+    pxToRem,
+    fontFamily,
+    fontSize,
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold,
+    ...variants
+  }, other, {
+    clone: false
+    // No need to clone deep
+  });
+}
+const shadowKeyUmbraOpacity = 0.2;
+const shadowKeyPenumbraOpacity = 0.14;
+const shadowAmbientShadowOpacity = 0.12;
+function createShadow(...px) {
+  return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(",");
+}
+const shadows = ["none", createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
+const easing = {
+  // This is the most common easing curve.
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Objects enter the screen at full velocity from off-screen and
+  // slowly decelerate to a resting point.
+  easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  // The sharp curve is used by objects that may return to the screen at any time.
+  sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+};
+const duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  // most basic recommended timing
+  standard: 300,
+  // this is to be used in complex animations
+  complex: 375,
+  // recommended when something is entering screen
+  enteringScreen: 225,
+  // recommended when something is leaving screen
+  leavingScreen: 195
+};
+function formatMs(milliseconds) {
+  return `${Math.round(milliseconds)}ms`;
+}
+function getAutoHeightDuration(height2) {
+  if (!height2) {
+    return 0;
+  }
+  const constant = height2 / 36;
+  return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3e3);
+}
+function createTransitions(inputTransitions) {
+  const mergedEasing = {
+    ...easing,
+    ...inputTransitions.easing
+  };
+  const mergedDuration = {
+    ...duration,
+    ...inputTransitions.duration
+  };
+  const create = (props = ["all"], options = {}) => {
+    const {
+      duration: durationOption = mergedDuration.standard,
+      easing: easingOption = mergedEasing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
+    if (process.env.NODE_ENV !== "production") {
+      const isString = (value) => typeof value === "string";
+      const isNumber = (value) => !Number.isNaN(parseFloat(value));
+      if (!isString(props) && !Array.isArray(props)) {
+        console.error('MUI: Argument "props" must be a string or Array.');
+      }
+      if (!isNumber(durationOption) && !isString(durationOption)) {
+        console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
+      }
+      if (!isString(easingOption)) {
+        console.error('MUI: Argument "easing" must be a string.');
+      }
+      if (!isNumber(delay) && !isString(delay)) {
+        console.error('MUI: Argument "delay" must be a number or a string.');
+      }
+      if (typeof options !== "object") {
+        console.error(["MUI: Secong argument of transition.create must be an object.", "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join("\n"));
+      }
+      if (Object.keys(other).length !== 0) {
+        console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(",")}].`);
+      }
+    }
+    return (Array.isArray(props) ? props : [props]).map((animatedProp) => `${animatedProp} ${typeof durationOption === "string" ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === "string" ? delay : formatMs(delay)}`).join(",");
+  };
+  return {
+    getAutoHeightDuration,
+    create,
+    ...inputTransitions,
+    easing: mergedEasing,
+    duration: mergedDuration
+  };
+}
+const zIndex = {
+  mobileStepper: 1e3,
+  fab: 1050,
+  speedDial: 1050,
+  appBar: 1100,
+  drawer: 1200,
+  modal: 1300,
+  snackbar: 1400,
+  tooltip: 1500
+};
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === "undefined" || typeof val === "string" || typeof val === "boolean" || typeof val === "number" || Array.isArray(val);
+}
+function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith("unstable_")) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}
+function createThemeNoVars(options = {}, ...args) {
+  const {
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
+  if (options.vars && // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateThemeVars === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature." : formatMuiErrorMessage(20));
+  }
+  const palette = createPalette(paletteInput);
+  const systemTheme = createTheme$1(options);
+  let muiTheme = deepmerge(systemTheme, {
+    mixins: createMixins(systemTheme.breakpoints, mixinsInput),
+    palette,
+    // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
+    shadows: shadows.slice(),
+    typography: createTypography(palette, typographyInput),
+    transitions: createTransitions(transitionsInput),
+    zIndex: {
+      ...zIndex
+    }
+  });
+  muiTheme = deepmerge(muiTheme, other);
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  if (process.env.NODE_ENV !== "production") {
+    const stateClasses = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"];
+    const traverse = (node, component) => {
+      let key;
+      for (key in node) {
+        const child = node[key];
+        if (stateClasses.includes(key) && Object.keys(child).length > 0) {
+          if (process.env.NODE_ENV !== "production") {
+            const stateClass = generateUtilityClass("", key);
+            console.error([`MUI: The \`${component}\` component increases the CSS specificity of the \`${key}\` internal state.`, "You can not override it like this: ", JSON.stringify(node, null, 2), "", `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
+              root: {
+                [`&.${stateClass}`]: child
+              }
+            }, null, 2), "", "https://mui.com/r/state-classes-guide"].join("\n"));
+          }
+          node[key] = {};
+        }
+      }
+    };
+    Object.keys(muiTheme.components).forEach((component) => {
+      const styleOverrides = muiTheme.components[component].styleOverrides;
+      if (styleOverrides && component.startsWith("Mui")) {
+        traverse(styleOverrides, component);
+      }
+    });
+  }
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other == null ? void 0 : other.unstable_sxConfig
+  };
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
+  muiTheme.toRuntimeSource = stringifyTheme;
+  return muiTheme;
+}
+function getOverlayAlpha(elevation) {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return Math.round(alphaValue * 10) / 1e3;
+}
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return "none";
+  }
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
+function getOpacity(mode) {
+  return {
+    inputPlaceholder: mode === "dark" ? 0.5 : 0.42,
+    inputUnderline: mode === "dark" ? 0.7 : 0.42,
+    switchTrackDisabled: mode === "dark" ? 0.2 : 0.12,
+    switchTrack: mode === "dark" ? 0.3 : 0.38
+  };
+}
+function getOverlays(mode) {
+  return mode === "dark" ? defaultDarkOverlays : [];
+}
+function createColorScheme(options) {
+  const {
+    palette: paletteInput = {
+      mode: "light"
+    },
+    // need to cast to avoid module augmentation test
+    opacity,
+    overlays,
+    ...rest
+  } = options;
+  const palette = createPalette(paletteInput);
+  return {
+    palette,
+    opacity: {
+      ...getOpacity(palette.mode),
+      ...opacity
+    },
+    overlays: overlays || getOverlays(palette.mode),
+    ...rest
+  };
+}
+function shouldSkipGeneratingVar(keys) {
+  var _a;
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) || // ends with sxConfig
+  keys[0] === "palette" && !!((_a = keys[1]) == null ? void 0 : _a.match(/(mode|contrastThreshold|tonalOffset)/));
+}
+const excludeVariablesFromRoot = (cssVarPrefix) => [...[...Array(25)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}overlays-${index}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkColor`];
+const defaultGetSelector = (theme) => (colorScheme, css) => {
+  const root = theme.rootSelector || ":root";
+  const selector = theme.colorSchemeSelector;
+  let rule = selector;
+  if (selector === "class") {
+    rule = ".%s";
+  }
+  if (selector === "data") {
+    rule = "[data-%s]";
+  }
+  if ((selector == null ? void 0 : selector.startsWith("data-")) && !selector.includes("%s")) {
+    rule = `[${selector}="%s"]`;
+  }
+  if (theme.defaultColorScheme === colorScheme) {
+    if (colorScheme === "dark") {
+      const excludedVariables = {};
+      excludeVariablesFromRoot(theme.cssVarPrefix).forEach((cssVar) => {
+        excludedVariables[cssVar] = css[cssVar];
+        delete css[cssVar];
+      });
+      if (rule === "media") {
+        return {
+          [root]: css,
+          [`@media (prefers-color-scheme: dark)`]: {
+            [root]: excludedVariables
+          }
+        };
+      }
+      if (rule) {
+        return {
+          [rule.replace("%s", colorScheme)]: excludedVariables,
+          [`${root}, ${rule.replace("%s", colorScheme)}`]: css
+        };
+      }
+      return {
+        [root]: {
+          ...css,
+          ...excludedVariables
+        }
+      };
+    }
+    if (rule && rule !== "media") {
+      return `${root}, ${rule.replace("%s", String(colorScheme))}`;
+    }
+  } else if (colorScheme) {
+    if (rule === "media") {
+      return {
+        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+          [root]: css
+        }
+      };
+    }
+    if (rule) {
+      return rule.replace("%s", String(colorScheme));
+    }
+  }
+  return root;
+};
+function assignNode(obj, keys) {
+  keys.forEach((k) => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+function setColor(obj, key, defaultValue) {
+  if (!obj[key] && defaultValue) {
+    obj[key] = defaultValue;
+  }
+}
+function toRgb(color2) {
+  if (typeof color2 !== "string" || !color2.startsWith("hsl")) {
+    return color2;
+  }
+  return hslToRgb(color2);
+}
+function setColorChannel(obj, key) {
+  if (!(`${key}Channel` in obj)) {
+    obj[`${key}Channel`] = private_safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().
+To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
+  }
+}
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === "number") {
+    return `${spacingInput}px`;
+  }
+  if (typeof spacingInput === "string" || typeof spacingInput === "function" || Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return "8px";
+}
+const silent = (fn) => {
+  try {
+    return fn();
+  } catch (error) {
+  }
+  return void 0;
+};
+const createGetCssVar = (cssVarPrefix = "mui") => unstable_createGetCssVar(cssVarPrefix);
+function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
+  if (!scheme) {
+    return void 0;
+  }
+  scheme = scheme === true ? {} : scheme;
+  const mode = colorScheme === "dark" ? "dark" : "light";
+  if (!restTheme) {
+    colorSchemes[colorScheme] = createColorScheme({
+      ...scheme,
+      palette: {
+        mode,
+        ...scheme == null ? void 0 : scheme.palette
+      }
+    });
+    return void 0;
+  }
+  const {
+    palette,
+    ...muiTheme
+  } = createThemeNoVars({
+    ...restTheme,
+    palette: {
+      mode,
+      ...scheme == null ? void 0 : scheme.palette
+    }
+  });
+  colorSchemes[colorScheme] = {
+    ...scheme,
+    palette,
+    opacity: {
+      ...getOpacity(mode),
+      ...scheme == null ? void 0 : scheme.opacity
+    },
+    overlays: (scheme == null ? void 0 : scheme.overlays) || getOverlays(mode)
+  };
+  return muiTheme;
+}
+function createThemeWithVars(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {
+      light: true
+    },
+    defaultColorScheme: defaultColorSchemeInput,
+    disableCssColorScheme = false,
+    cssVarPrefix = "mui",
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar,
+    colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? "media" : void 0,
+    rootSelector = ":root",
+    ...input
+  } = options;
+  const firstColorScheme = Object.keys(colorSchemesInput)[0];
+  const defaultColorScheme = defaultColorSchemeInput || (colorSchemesInput.light && firstColorScheme !== "light" ? "light" : firstColorScheme);
+  const getCssVar = createGetCssVar(cssVarPrefix);
+  const {
+    [defaultColorScheme]: defaultSchemeInput,
+    light: builtInLight,
+    dark: builtInDark,
+    ...customColorSchemes
+  } = colorSchemesInput;
+  const colorSchemes = {
+    ...customColorSchemes
+  };
+  let defaultScheme = defaultSchemeInput;
+  if (defaultColorScheme === "dark" && !("dark" in colorSchemesInput) || defaultColorScheme === "light" && !("light" in colorSchemesInput)) {
+    defaultScheme = true;
+  }
+  if (!defaultScheme) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : formatMuiErrorMessage(21, defaultColorScheme));
+  }
+  const muiTheme = attachColorScheme$1(colorSchemes, defaultScheme, input, defaultColorScheme);
+  if (builtInLight && !colorSchemes.light) {
+    attachColorScheme$1(colorSchemes, builtInLight, void 0, "light");
+  }
+  if (builtInDark && !colorSchemes.dark) {
+    attachColorScheme$1(colorSchemes, builtInDark, void 0, "dark");
+  }
+  let theme = {
+    defaultColorScheme,
+    ...muiTheme,
+    cssVarPrefix,
+    colorSchemeSelector: selector,
+    rootSelector,
+    getCssVar,
+    colorSchemes,
+    font: {
+      ...prepareTypographyVars(muiTheme.typography),
+      ...muiTheme.font
+    },
+    spacing: getSpacingVal(input.spacing)
+  };
+  Object.keys(theme.colorSchemes).forEach((key) => {
+    const palette = theme.colorSchemes[key].palette;
+    const setCssVarColor = (cssVar) => {
+      const tokens = cssVar.split("-");
+      const color2 = tokens[1];
+      const colorToken = tokens[2];
+      return getCssVar(cssVar, palette[color2][colorToken]);
+    };
+    if (palette.mode === "light") {
+      setColor(palette.common, "background", "#fff");
+      setColor(palette.common, "onBackground", "#000");
+    }
+    if (palette.mode === "dark") {
+      setColor(palette.common, "background", "#000");
+      setColor(palette.common, "onBackground", "#fff");
+    }
+    assignNode(palette, ["Alert", "AppBar", "Avatar", "Button", "Chip", "FilledInput", "LinearProgress", "Skeleton", "Slider", "SnackbarContent", "SpeedDialAction", "StepConnector", "StepContent", "Switch", "TableCell", "Tooltip"]);
+    if (palette.mode === "light") {
+      setColor(palette.Alert, "errorColor", private_safeDarken(palette.error.light, 0.6));
+      setColor(palette.Alert, "infoColor", private_safeDarken(palette.info.light, 0.6));
+      setColor(palette.Alert, "successColor", private_safeDarken(palette.success.light, 0.6));
+      setColor(palette.Alert, "warningColor", private_safeDarken(palette.warning.light, 0.6));
+      setColor(palette.Alert, "errorFilledBg", setCssVarColor("palette-error-main"));
+      setColor(palette.Alert, "infoFilledBg", setCssVarColor("palette-info-main"));
+      setColor(palette.Alert, "successFilledBg", setCssVarColor("palette-success-main"));
+      setColor(palette.Alert, "warningFilledBg", setCssVarColor("palette-warning-main"));
+      setColor(palette.Alert, "errorFilledColor", silent(() => palette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, "infoFilledColor", silent(() => palette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, "successFilledColor", silent(() => palette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, "warningFilledColor", silent(() => palette.getContrastText(palette.warning.main)));
+      setColor(palette.Alert, "errorStandardBg", private_safeLighten(palette.error.light, 0.9));
+      setColor(palette.Alert, "infoStandardBg", private_safeLighten(palette.info.light, 0.9));
+      setColor(palette.Alert, "successStandardBg", private_safeLighten(palette.success.light, 0.9));
+      setColor(palette.Alert, "warningStandardBg", private_safeLighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, "errorIconColor", setCssVarColor("palette-error-main"));
+      setColor(palette.Alert, "infoIconColor", setCssVarColor("palette-info-main"));
+      setColor(palette.Alert, "successIconColor", setCssVarColor("palette-success-main"));
+      setColor(palette.Alert, "warningIconColor", setCssVarColor("palette-warning-main"));
+      setColor(palette.AppBar, "defaultBg", setCssVarColor("palette-grey-100"));
+      setColor(palette.Avatar, "defaultBg", setCssVarColor("palette-grey-400"));
+      setColor(palette.Button, "inheritContainedBg", setCssVarColor("palette-grey-300"));
+      setColor(palette.Button, "inheritContainedHoverBg", setCssVarColor("palette-grey-A100"));
+      setColor(palette.Chip, "defaultBorder", setCssVarColor("palette-grey-400"));
+      setColor(palette.Chip, "defaultAvatarColor", setCssVarColor("palette-grey-700"));
+      setColor(palette.Chip, "defaultIconColor", setCssVarColor("palette-grey-700"));
+      setColor(palette.FilledInput, "bg", "rgba(0, 0, 0, 0.06)");
+      setColor(palette.FilledInput, "hoverBg", "rgba(0, 0, 0, 0.09)");
+      setColor(palette.FilledInput, "disabledBg", "rgba(0, 0, 0, 0.12)");
+      setColor(palette.LinearProgress, "primaryBg", private_safeLighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, "secondaryBg", private_safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, "errorBg", private_safeLighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, "infoBg", private_safeLighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, "successBg", private_safeLighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, "warningBg", private_safeLighten(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, "bg", `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.11)`);
+      setColor(palette.Slider, "primaryTrack", private_safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, "secondaryTrack", private_safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, "errorTrack", private_safeLighten(palette.error.main, 0.62));
+      setColor(palette.Slider, "infoTrack", private_safeLighten(palette.info.main, 0.62));
+      setColor(palette.Slider, "successTrack", private_safeLighten(palette.success.main, 0.62));
+      setColor(palette.Slider, "warningTrack", private_safeLighten(palette.warning.main, 0.62));
+      const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, "bg", snackbarContentBackground);
+      setColor(palette.SnackbarContent, "color", silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, "fabHoverBg", private_safeEmphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, "border", setCssVarColor("palette-grey-400"));
+      setColor(palette.StepContent, "border", setCssVarColor("palette-grey-400"));
+      setColor(palette.Switch, "defaultColor", setCssVarColor("palette-common-white"));
+      setColor(palette.Switch, "defaultDisabledColor", setCssVarColor("palette-grey-100"));
+      setColor(palette.Switch, "primaryDisabledColor", private_safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, "secondaryDisabledColor", private_safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, "errorDisabledColor", private_safeLighten(palette.error.main, 0.62));
+      setColor(palette.Switch, "infoDisabledColor", private_safeLighten(palette.info.main, 0.62));
+      setColor(palette.Switch, "successDisabledColor", private_safeLighten(palette.success.main, 0.62));
+      setColor(palette.Switch, "warningDisabledColor", private_safeLighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, "border", private_safeLighten(private_safeAlpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, "bg", private_safeAlpha(palette.grey[700], 0.92));
+    }
+    if (palette.mode === "dark") {
+      setColor(palette.Alert, "errorColor", private_safeLighten(palette.error.light, 0.6));
+      setColor(palette.Alert, "infoColor", private_safeLighten(palette.info.light, 0.6));
+      setColor(palette.Alert, "successColor", private_safeLighten(palette.success.light, 0.6));
+      setColor(palette.Alert, "warningColor", private_safeLighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, "errorFilledBg", setCssVarColor("palette-error-dark"));
+      setColor(palette.Alert, "infoFilledBg", setCssVarColor("palette-info-dark"));
+      setColor(palette.Alert, "successFilledBg", setCssVarColor("palette-success-dark"));
+      setColor(palette.Alert, "warningFilledBg", setCssVarColor("palette-warning-dark"));
+      setColor(palette.Alert, "errorFilledColor", silent(() => palette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, "infoFilledColor", silent(() => palette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, "successFilledColor", silent(() => palette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, "warningFilledColor", silent(() => palette.getContrastText(palette.warning.dark)));
+      setColor(palette.Alert, "errorStandardBg", private_safeDarken(palette.error.light, 0.9));
+      setColor(palette.Alert, "infoStandardBg", private_safeDarken(palette.info.light, 0.9));
+      setColor(palette.Alert, "successStandardBg", private_safeDarken(palette.success.light, 0.9));
+      setColor(palette.Alert, "warningStandardBg", private_safeDarken(palette.warning.light, 0.9));
+      setColor(palette.Alert, "errorIconColor", setCssVarColor("palette-error-main"));
+      setColor(palette.Alert, "infoIconColor", setCssVarColor("palette-info-main"));
+      setColor(palette.Alert, "successIconColor", setCssVarColor("palette-success-main"));
+      setColor(palette.Alert, "warningIconColor", setCssVarColor("palette-warning-main"));
+      setColor(palette.AppBar, "defaultBg", setCssVarColor("palette-grey-900"));
+      setColor(palette.AppBar, "darkBg", setCssVarColor("palette-background-paper"));
+      setColor(palette.AppBar, "darkColor", setCssVarColor("palette-text-primary"));
+      setColor(palette.Avatar, "defaultBg", setCssVarColor("palette-grey-600"));
+      setColor(palette.Button, "inheritContainedBg", setCssVarColor("palette-grey-800"));
+      setColor(palette.Button, "inheritContainedHoverBg", setCssVarColor("palette-grey-700"));
+      setColor(palette.Chip, "defaultBorder", setCssVarColor("palette-grey-700"));
+      setColor(palette.Chip, "defaultAvatarColor", setCssVarColor("palette-grey-300"));
+      setColor(palette.Chip, "defaultIconColor", setCssVarColor("palette-grey-300"));
+      setColor(palette.FilledInput, "bg", "rgba(255, 255, 255, 0.09)");
+      setColor(palette.FilledInput, "hoverBg", "rgba(255, 255, 255, 0.13)");
+      setColor(palette.FilledInput, "disabledBg", "rgba(255, 255, 255, 0.12)");
+      setColor(palette.LinearProgress, "primaryBg", private_safeDarken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, "secondaryBg", private_safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, "errorBg", private_safeDarken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, "infoBg", private_safeDarken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, "successBg", private_safeDarken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, "warningBg", private_safeDarken(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, "bg", `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.13)`);
+      setColor(palette.Slider, "primaryTrack", private_safeDarken(palette.primary.main, 0.5));
+      setColor(palette.Slider, "secondaryTrack", private_safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, "errorTrack", private_safeDarken(palette.error.main, 0.5));
+      setColor(palette.Slider, "infoTrack", private_safeDarken(palette.info.main, 0.5));
+      setColor(palette.Slider, "successTrack", private_safeDarken(palette.success.main, 0.5));
+      setColor(palette.Slider, "warningTrack", private_safeDarken(palette.warning.main, 0.5));
+      const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, "bg", snackbarContentBackground);
+      setColor(palette.SnackbarContent, "color", silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, "fabHoverBg", private_safeEmphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, "border", setCssVarColor("palette-grey-600"));
+      setColor(palette.StepContent, "border", setCssVarColor("palette-grey-600"));
+      setColor(palette.Switch, "defaultColor", setCssVarColor("palette-grey-300"));
+      setColor(palette.Switch, "defaultDisabledColor", setCssVarColor("palette-grey-600"));
+      setColor(palette.Switch, "primaryDisabledColor", private_safeDarken(palette.primary.main, 0.55));
+      setColor(palette.Switch, "secondaryDisabledColor", private_safeDarken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, "errorDisabledColor", private_safeDarken(palette.error.main, 0.55));
+      setColor(palette.Switch, "infoDisabledColor", private_safeDarken(palette.info.main, 0.55));
+      setColor(palette.Switch, "successDisabledColor", private_safeDarken(palette.success.main, 0.55));
+      setColor(palette.Switch, "warningDisabledColor", private_safeDarken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, "border", private_safeDarken(private_safeAlpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, "bg", private_safeAlpha(palette.grey[700], 0.92));
+    }
+    setColorChannel(palette.background, "default");
+    setColorChannel(palette.background, "paper");
+    setColorChannel(palette.common, "background");
+    setColorChannel(palette.common, "onBackground");
+    setColorChannel(palette, "divider");
+    Object.keys(palette).forEach((color2) => {
+      const colors = palette[color2];
+      if (color2 !== "tonalOffset" && colors && typeof colors === "object") {
+        if (colors.main) {
+          setColor(palette[color2], "mainChannel", private_safeColorChannel(toRgb(colors.main)));
+        }
+        if (colors.light) {
+          setColor(palette[color2], "lightChannel", private_safeColorChannel(toRgb(colors.light)));
+        }
+        if (colors.dark) {
+          setColor(palette[color2], "darkChannel", private_safeColorChannel(toRgb(colors.dark)));
+        }
+        if (colors.contrastText) {
+          setColor(palette[color2], "contrastTextChannel", private_safeColorChannel(toRgb(colors.contrastText)));
+        }
+        if (color2 === "text") {
+          setColorChannel(palette[color2], "primary");
+          setColorChannel(palette[color2], "secondary");
+        }
+        if (color2 === "action") {
+          if (colors.active) {
+            setColorChannel(palette[color2], "active");
+          }
+          if (colors.selected) {
+            setColorChannel(palette[color2], "selected");
+          }
+        }
+      }
+    });
+  });
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+  const parserConfig = {
+    prefix: cssVarPrefix,
+    disableCssColorScheme,
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar$1,
+    getSelector: defaultGetSelector(theme)
+  };
+  const {
+    vars,
+    generateThemeVars,
+    generateStyleSheets
+  } = prepareCssVars(theme, parserConfig);
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return createSpacing$1(input.spacing, createUnarySpacing(this));
+  };
+  theme.getColorSchemeSelector = createGetColorSchemeSelector(selector);
+  theme.spacing = theme.generateSpacing();
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar$1;
+  theme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...input == null ? void 0 : input.unstable_sxConfig
+  };
+  theme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
+  theme.toRuntimeSource = stringifyTheme;
+  return theme;
+}
+function attachColorScheme(theme, scheme, colorScheme) {
+  if (!theme.colorSchemes) {
+    return void 0;
+  }
+  if (colorScheme) {
+    theme.colorSchemes[scheme] = {
+      ...colorScheme !== true && colorScheme,
+      palette: createPalette({
+        ...colorScheme === true ? {} : colorScheme.palette,
+        mode: scheme
+      })
+      // cast type to skip module augmentation test
+    };
+  }
+}
+function createTheme(options = {}, ...args) {
+  const {
+    palette,
+    cssVariables = false,
+    colorSchemes: initialColorSchemes = !palette ? {
+      light: true
+    } : void 0,
+    defaultColorScheme: initialDefaultColorScheme = palette == null ? void 0 : palette.mode,
+    ...rest
+  } = options;
+  const defaultColorSchemeInput = initialDefaultColorScheme || "light";
+  const defaultScheme = initialColorSchemes == null ? void 0 : initialColorSchemes[defaultColorSchemeInput];
+  const colorSchemesInput = {
+    ...initialColorSchemes,
+    ...palette ? {
+      [defaultColorSchemeInput]: {
+        ...typeof defaultScheme !== "boolean" && defaultScheme,
+        palette
+      }
+    } : void 0
+  };
+  if (cssVariables === false) {
+    if (!("colorSchemes" in options)) {
+      return createThemeNoVars(options, ...args);
+    }
+    let paletteOptions = palette;
+    if (!("palette" in options)) {
+      if (colorSchemesInput[defaultColorSchemeInput]) {
+        if (colorSchemesInput[defaultColorSchemeInput] !== true) {
+          paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
+        } else if (defaultColorSchemeInput === "dark") {
+          paletteOptions = {
+            mode: "dark"
+          };
+        }
+      }
+    }
+    const theme = createThemeNoVars({
+      ...options,
+      palette: paletteOptions
+    }, ...args);
+    theme.defaultColorScheme = defaultColorSchemeInput;
+    theme.colorSchemes = colorSchemesInput;
+    if (theme.palette.mode === "light") {
+      theme.colorSchemes.light = {
+        ...colorSchemesInput.light !== true && colorSchemesInput.light,
+        palette: theme.palette
+      };
+      attachColorScheme(theme, "dark", colorSchemesInput.dark);
+    }
+    if (theme.palette.mode === "dark") {
+      theme.colorSchemes.dark = {
+        ...colorSchemesInput.dark !== true && colorSchemesInput.dark,
+        palette: theme.palette
+      };
+      attachColorScheme(theme, "light", colorSchemesInput.light);
+    }
+    return theme;
+  }
+  if (!palette && !("light" in colorSchemesInput) && defaultColorSchemeInput === "light") {
+    colorSchemesInput.light = true;
+  }
+  return createThemeWithVars({
+    ...rest,
+    colorSchemes: colorSchemesInput,
+    defaultColorScheme: defaultColorSchemeInput,
+    ...typeof cssVariables !== "boolean" && cssVariables
+  }, ...args);
+}
+const defaultTheme = createTheme();
+const THEME_ID = "$$material";
+function preprocessStyles(input) {
+  const {
+    variants,
+    ...style2
+  } = input;
+  const result = {
+    variants,
+    style: internal_serializeStyles(style2),
+    isProcessed: true
+  };
+  if (result.style === style2) {
+    return result;
+  }
+  if (variants) {
+    variants.forEach((variant) => {
+      if (typeof variant.style !== "function") {
+        variant.style = internal_serializeStyles(variant.style);
+      }
+    });
+  }
+  return result;
+}
+const systemDefaultTheme = createTheme$1();
+function shouldForwardProp(prop) {
+  return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
+}
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (_props, styles) => styles[slot];
+}
+function attachTheme(props, themeId, defaultTheme2) {
+  props.theme = isObjectEmpty(props.theme) ? defaultTheme2 : props.theme[themeId] || props.theme;
+}
+function processStyle(props, style2, layerName) {
+  const resolvedStyle = typeof style2 === "function" ? style2(props) : style2;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap((subStyle) => processStyle(props, subStyle, layerName));
+  }
+  if (Array.isArray(resolvedStyle == null ? void 0 : resolvedStyle.variants)) {
+    let rootStyle;
+    if (resolvedStyle.isProcessed) {
+      rootStyle = layerName ? shallowLayer(resolvedStyle.style, layerName) : resolvedStyle.style;
+    } else {
+      const {
+        variants,
+        ...otherStyles
+      } = resolvedStyle;
+      rootStyle = layerName ? shallowLayer(internal_serializeStyles(otherStyles), layerName) : otherStyles;
+    }
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle], layerName);
+  }
+  if (resolvedStyle == null ? void 0 : resolvedStyle.isProcessed) {
+    return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle.style), layerName) : resolvedStyle.style;
+  }
+  return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle), layerName) : resolvedStyle;
+}
+function processStyleVariants(props, variants, results = [], layerName = void 0) {
+  var _a;
+  let mergedState;
+  variantLoop: for (let i = 0; i < variants.length; i += 1) {
+    const variant = variants[i];
+    if (typeof variant.props === "function") {
+      mergedState ?? (mergedState = {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      });
+      if (!variant.props(mergedState)) {
+        continue;
+      }
+    } else {
+      for (const key in variant.props) {
+        if (props[key] !== variant.props[key] && ((_a = props.ownerState) == null ? void 0 : _a[key]) !== variant.props[key]) {
+          continue variantLoop;
+        }
+      }
+    }
+    if (typeof variant.style === "function") {
+      mergedState ?? (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 results;
+}
+function createStyled(input = {}) {
+  const {
+    themeId,
+    defaultTheme: defaultTheme2 = systemDefaultTheme,
+    rootShouldForwardProp: rootShouldForwardProp2 = shouldForwardProp,
+    slotShouldForwardProp: slotShouldForwardProp2 = shouldForwardProp
+  } = input;
+  function styleAttachTheme(props) {
+    attachTheme(props, themeId, defaultTheme2);
+  }
+  const styled2 = (tag, inputOptions = {}) => {
+    internal_mutateStyles(tag, (styles) => styles.filter((style2) => style2 !== styleFunctionSx));
+    const {
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      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)),
+      ...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 shouldForwardPropOption = shouldForwardProp;
+    if (componentSlot === "Root" || componentSlot === "root") {
+      shouldForwardPropOption = rootShouldForwardProp2;
+    } else if (componentSlot) {
+      shouldForwardPropOption = slotShouldForwardProp2;
+    } else if (isStringTag(tag)) {
+      shouldForwardPropOption = void 0;
+    }
+    const defaultStyledResolver = styled$1(tag, {
+      shouldForwardProp: shouldForwardPropOption,
+      label: generateStyledLabel(componentName, componentSlot),
+      ...options
+    });
+    const transformStyle = (style2) => {
+      if (style2.__emotion_real === style2) {
+        return style2;
+      }
+      if (typeof style2 === "function") {
+        return function styleFunctionProcessor(props) {
+          return processStyle(props, style2, props.theme.modularCssLayers ? layerName : void 0);
+        };
+      }
+      if (isPlainObject(style2)) {
+        const serialized = preprocessStyles(style2);
+        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 style2;
+    };
+    const muiStyledResolver = (...expressionsInput) => {
+      const expressionsHead = [];
+      const expressionsBody = expressionsInput.map(transformStyle);
+      const expressionsTail = [];
+      expressionsHead.push(styleAttachTheme);
+      if (componentName && overridesResolver) {
+        expressionsTail.push(function styleThemeOverrides(props) {
+          var _a, _b;
+          const theme = props.theme;
+          const styleOverrides = (_b = (_a = theme.components) == null ? void 0 : _a[componentName]) == null ? void 0 : _b.styleOverrides;
+          if (!styleOverrides) {
+            return null;
+          }
+          const resolvedStyleOverrides = {};
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey], props.theme.modularCssLayers ? "theme" : void 0);
+          }
+          return overridesResolver(props, resolvedStyleOverrides);
+        });
+      }
+      if (componentName && !skipVariantsResolver) {
+        expressionsTail.push(function styleThemeVariants(props) {
+          var _a, _b;
+          const theme = props.theme;
+          const themeVariants = (_b = (_a = theme == null ? void 0 : theme.components) == null ? void 0 : _a[componentName]) == null ? void 0 : _b.variants;
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? "theme" : void 0);
+        });
+      }
+      if (!skipSx) {
+        expressionsTail.push(styleFunctionSx);
+      }
+      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];
+        }
+        expressionsHead.unshift(outputStrings);
+      }
+      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
+      const Component = defaultStyledResolver(...expressions);
+      if (tag.muiName) {
+        Component.muiName = tag.muiName;
+      }
+      if (process.env.NODE_ENV !== "production") {
+        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
+      }
+      return Component;
+    };
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+    return muiStyledResolver;
+  };
+  return styled2;
+}
+function generateDisplayName(componentName, componentSlot, tag) {
+  if (componentName) {
+    return `${componentName}${capitalize(componentSlot || "")}`;
+  }
+  return `Styled(${getDisplayName(tag)})`;
+}
+function generateStyledLabel(componentName, componentSlot) {
+  let label;
+  if (process.env.NODE_ENV !== "production") {
+    if (componentName) {
+      label = `${componentName}-${lowercaseFirstLetter(componentSlot || "Root")}`;
+    }
+  }
+  return label;
+}
+function isObjectEmpty(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);
+}
+function slotShouldForwardProp(prop) {
+  return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
+}
+const rootShouldForwardProp = (prop) => slotShouldForwardProp(prop) && prop !== "classes";
+const styled = createStyled({
+  themeId: THEME_ID,
+  defaultTheme,
+  rootShouldForwardProp
+});
+const memoTheme = unstable_memoTheme;
+process.env.NODE_ENV !== "production" ? {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.object.isRequired
+} : void 0;
+function useDefaultProps(params) {
+  return useDefaultProps$1(params);
+}
+function getSvgIconUtilityClass(slot) {
+  return generateUtilityClass("MuiSvgIcon", slot);
+}
+generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
+const useUtilityClasses = (ownerState) => {
+  const {
+    color: color2,
+    fontSize,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", color2 !== "inherit" && `color${capitalize(color2)}`, `fontSize${capitalize(fontSize)}`]
+  };
+  return composeClasses(slots, getSvgIconUtilityClass, classes);
+};
+const SvgIconRoot = styled("svg", {
+  name: "MuiSvgIcon",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.color !== "inherit" && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  return {
+    userSelect: "none",
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    flexShrink: 0,
+    transition: (_d = (_a = theme.transitions) == null ? void 0 : _a.create) == null ? void 0 : _d.call(_a, "fill", {
+      duration: (_c = (_b = (theme.vars ?? theme).transitions) == null ? void 0 : _b.duration) == null ? void 0 : _c.shorter
+    }),
+    variants: [
+      {
+        props: (props) => !props.hasSvgAsChild,
+        style: {
+          // the <svg> will define the property that has `currentColor`
+          // for example heroicons uses fill="none" and stroke="currentColor"
+          fill: "currentColor"
+        }
+      },
+      {
+        props: {
+          fontSize: "inherit"
+        },
+        style: {
+          fontSize: "inherit"
+        }
+      },
+      {
+        props: {
+          fontSize: "small"
+        },
+        style: {
+          fontSize: ((_f = (_e = theme.typography) == null ? void 0 : _e.pxToRem) == null ? void 0 : _f.call(_e, 20)) || "1.25rem"
+        }
+      },
+      {
+        props: {
+          fontSize: "medium"
+        },
+        style: {
+          fontSize: ((_h = (_g = theme.typography) == null ? void 0 : _g.pxToRem) == null ? void 0 : _h.call(_g, 24)) || "1.5rem"
+        }
+      },
+      {
+        props: {
+          fontSize: "large"
+        },
+        style: {
+          fontSize: ((_j = (_i = theme.typography) == null ? void 0 : _i.pxToRem) == null ? void 0 : _j.call(_i, 35)) || "2.1875rem"
+        }
+      },
+      // TODO v5 deprecate color prop, v6 remove for sx
+      ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color2]) => {
+        var _a2, _b2;
+        return {
+          props: {
+            color: color2
+          },
+          style: {
+            color: (_b2 = (_a2 = (theme.vars ?? theme).palette) == null ? void 0 : _a2[color2]) == null ? void 0 : _b2.main
+          }
+        };
+      }),
+      {
+        props: {
+          color: "action"
+        },
+        style: {
+          color: (_l = (_k = (theme.vars ?? theme).palette) == null ? void 0 : _k.action) == null ? void 0 : _l.active
+        }
+      },
+      {
+        props: {
+          color: "disabled"
+        },
+        style: {
+          color: (_n = (_m = (theme.vars ?? theme).palette) == null ? void 0 : _m.action) == null ? void 0 : _n.disabled
+        }
+      },
+      {
+        props: {
+          color: "inherit"
+        },
+        style: {
+          color: void 0
+        }
+      }
+    ]
+  };
+}));
+const SvgIcon = /* @__PURE__ */ React.forwardRef(function SvgIcon2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiSvgIcon"
+  });
+  const {
+    children,
+    className,
+    color: color2 = "inherit",
+    component = "svg",
+    fontSize = "medium",
+    htmlColor,
+    inheritViewBox = false,
+    titleAccess,
+    viewBox = "0 0 24 24",
+    ...other
+  } = props;
+  const hasSvgAsChild = /* @__PURE__ */ React.isValidElement(children) && children.type === "svg";
+  const ownerState = {
+    ...props,
+    color: color2,
+    component,
+    fontSize,
+    instanceFontSize: inProps.fontSize,
+    inheritViewBox,
+    viewBox,
+    hasSvgAsChild
+  };
+  const more = {};
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsxs(SvgIconRoot, {
+    as: component,
+    className: clsx(classes.root, className),
+    focusable: "false",
+    color: htmlColor,
+    "aria-hidden": titleAccess ? void 0 : true,
+    role: titleAccess ? "img" : void 0,
+    ref,
+    ...more,
+    ...other,
+    ...hasSvgAsChild && children.props,
+    ownerState,
+    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /* @__PURE__ */ jsx("title", {
+      children: titleAccess
+    }) : null]
+  });
+});
+process.env.NODE_ENV !== "production" ? SvgIcon.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Node passed into the SVG element.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "large", "medium", "small"]), PropTypes.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: PropTypes.string,
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: PropTypes.bool,
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: PropTypes.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox: PropTypes.string
+} : void 0;
+SvgIcon.muiName = "SvgIcon";
+function createSvgIcon(path, displayName) {
+  function Component(props, ref) {
+    return /* @__PURE__ */ jsx(SvgIcon, {
+      "data-testid": `${displayName}Icon`,
+      ref,
+      ...props,
+      children: path
+    });
+  }
+  if (process.env.NODE_ENV !== "production") {
+    Component.displayName = `${displayName}Icon`;
+  }
+  Component.muiName = SvgIcon.muiName;
+  return /* @__PURE__ */ React.memo(/* @__PURE__ */ React.forwardRef(Component));
+}
+const ErrorIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
+}), "Error");
+const VisibilityIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
+}), "Visibility");
+const ContentCopyIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
+}), "ContentCopy");
+const CheckIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+}), "Check");
+const OpenInFullIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M21 11V3h-8l3.29 3.29-10 10L3 13v8h8l-3.29-3.29 10-10z"
+}), "OpenInFull");
+function SingleMessage({
+  contentMessage,
+  timeMessage,
+  isChatbot,
+  isLoading = false,
+  icon,
+  nameChatbot,
+  status,
+  sources,
+  themeInfo = "light"
+}) {
+  sources = sources || [];
+  const theme = useTheme();
+  const [copiedSource, setCopiedSource] = useState(null);
+  const [showAllSources, setShowAllSources] = useState(false);
+  const [expandedChips, setExpandedChips] = useState(/* @__PURE__ */ new Set());
+  const maxVisibleSources = 8;
+  const visibleSources = sources.slice(0, maxVisibleSources);
+  const remainingSources = sources.length - maxVisibleSources;
+  const copySource = async (source) => {
+    try {
+      await navigator.clipboard.writeText(source.url);
+      setCopiedSource(source.url);
+      setTimeout(() => setCopiedSource(null), 2e3);
+    } catch (err) {
+      console.error("Errore durante la copia:", err);
+    }
+  };
+  const toggleChipExpansion = (url) => {
+    const newSet = new Set(expandedChips);
+    if (newSet.has(url)) {
+      newSet.delete(url);
+      if (newSet.size < sources.length) {
+        setShowAllSources(false);
+      }
+    } else {
+      newSet.add(url);
+      if (newSet.size === sources.length) {
+        setShowAllSources(true);
+      }
+    }
+    setExpandedChips(newSet);
+  };
+  const getTypeColor = (source) => {
+    const baseColor = getStableColor(source, themeInfo);
+    const hexToRgb2 = (hex) => {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+      return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      } : { r: 200, g: 200, b: 200 };
+    };
+    const rgb = hexToRgb2(baseColor);
+    const backgroundOpacity = themeInfo === "light" ? 0.1 : 0.2;
+    const borderOpacity = themeInfo === "light" ? 0.3 : 0.4;
+    const lightBackground = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${backgroundOpacity})`;
+    const lightBorder = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${borderOpacity})`;
+    return {
+      backgroundColor: lightBackground,
+      color: baseColor,
+      borderColor: lightBorder
+    };
+  };
+  const ariaLabel = (isChatbot ? nameChatbot + " " + Translate({ label: "sendMessage" }) : Translate({ label: "youSendMessage" })) + timeMessage;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "openk9-single-message-container",
+      display: "flex",
+      flexDirection: "column",
+      gap: "5px",
+      width: "100%",
+      children: [
+        (status == null ? void 0 : status.toUpperCase()) === "ERROR" ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: "openk9-message-box",
+            display: "flex",
+            alignItems: "flex-end",
+            gap: 4,
+            sx: {
+              gap: "6px",
+              backgroundColor: "white",
+              flexDirection: isChatbot ? "row" : "row-reverse"
+            },
+            children: [
+              icon && /* @__PURE__ */ jsx(Box, { className: "openk9-chatbot-icon", children: icon }),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  className: "openk9-error-message-container",
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    background: "#FCEAEA",
+                    border: "1px solid #D32F2F",
+                    borderRadius: "10px",
+                    padding: "12px 16px",
+                    gap: "10px",
+                    width: "100%"
+                  },
+                  "aria-live": "polite",
+                  children: [
+                    /* @__PURE__ */ jsx(ErrorIcon, { sx: { color: "#D32F2F", fontSize: "20px" } }),
+                    /* @__PURE__ */ jsx(
+                      ParagraphMessage,
+                      {
+                        className: "openk9-paragraph-message",
+                        $font: theme.typography.fontFamily,
+                        $color: "#D32F2F",
+                        children: contentMessage
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: "openk9-message-box",
+            display: "flex",
+            alignItems: "flex-end",
+            gap: 4,
+            sx: {
+              gap: "6px",
+              backgroundColor: "white",
+              flexDirection: isChatbot ? "row" : "row-reverse"
+            },
+            children: [
+              icon && /* @__PURE__ */ jsx(Box, { className: "openk9-chatbot-icon", children: icon }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: "openk9-message-content-wrapper",
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    width: ["-webkit-fill-available", "-moz-available", "100%"],
+                    gap: "6px"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      className: "openk9-message-content",
+                      sx: {
+                        overflow: "auto",
+                        display: "flex",
+                        flexDirection: "column",
+                        backgroundColor: isChatbot ? theme.palette.background.default : theme.palette.primary.main,
+                        border: "1px solid",
+                        borderColor: theme.palette.primary.main,
+                        paddingInline: "16px",
+                        color: !isChatbot ? "white" : "black",
+                        borderRadius: isChatbot ? "12px 12px 12px 2px" : "12px 12px 2px 12px"
+                      },
+                      "aria-live": "polite",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ParagraphMessage,
+                          {
+                            className: "openk9-paragraph-message",
+                            $isLoading: isLoading,
+                            $font: theme.typography.fontFamily,
+                            children: isLoading ? /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                className: "openk9-loading-icon-container",
+                                sx: {
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  gap: "5px"
+                                },
+                                children: /* @__PURE__ */ jsx(
+                                  CircularProgress,
+                                  {
+                                    className: "openk9-loader",
+                                    disableShrink: true,
+                                    size: 30,
+                                    sx: { color: theme.palette.primary.main }
+                                  }
+                                )
+                              }
+                            ) : /* @__PURE__ */ jsxs(
+                              FocusableSection,
+                              {
+                                className: "openk9-focusable-section",
+                                $contraxtFocus: isChatbot ? "black" : "white",
+                                "aria-label": ariaLabel,
+                                tabIndex: 0,
+                                children: [
+                                  nameChatbot && /* @__PURE__ */ jsx(
+                                    ParagraphName,
+                                    {
+                                      className: "openk9-paragraph-name",
+                                      $font: theme.typography.fontFamily || "",
+                                      children: nameChatbot
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(Markdown, { children: contentMessage })
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        sources.length > 0 && /* @__PURE__ */ jsxs(Box, { mb: 6, children: [
+                          /* @__PURE__ */ jsxs(
+                            Box,
+                            {
+                              display: "flex",
+                              justifyContent: "space-between",
+                              alignItems: "center",
+                              mb: 2,
+                              sx: { overflowX: "hidden" },
+                              children: [
+                                /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+                                  sources.length,
+                                  " sources"
+                                ] }),
+                                /* @__PURE__ */ jsxs(
+                                  Box,
+                                  {
+                                    component: "button",
+                                    onClick: () => {
+                                      const newState = !showAllSources;
+                                      setShowAllSources(newState);
+                                      if (newState) {
+                                        const allExpanded = new Set(
+                                          sources.map((s) => s.url || "")
+                                        );
+                                        setExpandedChips(allExpanded);
+                                      } else {
+                                        setExpandedChips(/* @__PURE__ */ new Set());
+                                      }
+                                    },
+                                    sx: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 0.5,
+                                      color: "#12518f",
+                                      fontSize: "0.75rem",
+                                      background: "none",
+                                      border: "none",
+                                      cursor: "pointer",
+                                      "&:hover": { color: "#2782ea" }
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx(VisibilityIcon, { sx: { fontSize: "0.75rem" } }),
+                                      /* @__PURE__ */ jsx(Typography, { variant: "caption", children: showAllSources ? "Hide all" : "Show all" })
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            Box,
+                            {
+                              display: "flex",
+                              flexWrap: "wrap",
+                              gap: 1,
+                              sx: { overflowX: "hidden" },
+                              children: [
+                                visibleSources.map((source, index) => {
+                                  const typeColors = getTypeColor(source.url || "");
+                                  return /* @__PURE__ */ jsx(
+                                    Chip,
+                                    {
+                                      label: /* @__PURE__ */ jsxs(
+                                        Box,
+                                        {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          gap: 1,
+                                          flex: 1,
+                                          sx: {
+                                            width: expandedChips.has(source.url || "") ? "230px" : "170px",
+                                            overflow: "hidden",
+                                            textOverflow: expandedChips.has(
+                                              source.url || ""
+                                            ) ? "unset" : "ellipsis",
+                                            whiteSpace: "nowrap"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsx(
+                                              Box,
+                                              {
+                                                sx: {
+                                                  flex: 1,
+                                                  width: 8,
+                                                  height: 8,
+                                                  flexShrink: 0,
+                                                  flexGrow: 0,
+                                                  borderRadius: "50%",
+                                                  backgroundColor: getStableColor(
+                                                    source.url,
+                                                    themeInfo
+                                                  )
+                                                }
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx(
+                                              Typography,
+                                              {
+                                                variant: "caption",
+                                                fontWeight: 500,
+                                                overflow: "hidden",
+                                                textOverflow: "ellipsis",
+                                                children: (source == null ? void 0 : source.title) && source.title
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsxs(Box, { children: [
+                                              /* @__PURE__ */ jsx(
+                                                IconButton,
+                                                {
+                                                  size: "small",
+                                                  onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    copySource(source);
+                                                  },
+                                                  sx: {
+                                                    p: 0.25,
+                                                    ml: 0.5,
+                                                    "&:hover": {
+                                                      backgroundColor: "rgba(0,0,0,0.05)"
+                                                    }
+                                                  },
+                                                  children: copiedSource === source.url ? /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: "0.75rem" } }) : /* @__PURE__ */ jsx(
+                                                    ContentCopyIcon,
+                                                    {
+                                                      sx: { fontSize: "0.75rem" }
+                                                    }
+                                                  )
+                                                }
+                                              ),
+                                              /* @__PURE__ */ jsx(
+                                                IconButton,
+                                                {
+                                                  size: "small",
+                                                  onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    toggleChipExpansion(source.url || "");
+                                                  },
+                                                  sx: {
+                                                    p: 0.25,
+                                                    "&:hover": {
+                                                      backgroundColor: "rgba(0,0,0,0.05)"
+                                                    }
+                                                  },
+                                                  children: /* @__PURE__ */ jsx(
+                                                    OpenInFullIcon,
+                                                    {
+                                                      sx: { fontSize: "0.75rem" }
+                                                    }
+                                                  )
+                                                }
+                                              )
+                                            ] })
+                                          ]
+                                        }
+                                      ),
+                                      onClick: () => window.open(source.url, "_blank"),
+                                      sx: {
+                                        backgroundColor: typeColors.backgroundColor,
+                                        color: typeColors.color,
+                                        border: `1px solid ${typeColors.borderColor}`,
+                                        cursor: "pointer",
+                                        "&:hover": {
+                                          backgroundColor: typeColors.backgroundColor,
+                                          opacity: 0.8
+                                        }
+                                      },
+                                      size: "small"
+                                    },
+                                    source.url || index
+                                  );
+                                }),
+                                remainingSources > 0 && /* @__PURE__ */ jsx(
+                                  Chip,
+                                  {
+                                    label: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [
+                                      /* @__PURE__ */ jsx(OpenInFullIcon, { sx: { fontSize: "0.75rem" } }),
+                                      /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+                                        "+",
+                                        remainingSources
+                                      ] })
+                                    ] }),
+                                    sx: {
+                                      backgroundColor: themeInfo === "light" ? "#f5f5f5" : "#2d2d2d",
+                                      color: themeInfo === "light" ? "#616161" : "#b0b0b0",
+                                      cursor: "pointer",
+                                      "&:hover": {
+                                        backgroundColor: themeInfo === "light" ? "#e0e0e0" : "#404040"
+                                      }
+                                    },
+                                    size: "small"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ParagraphTime,
+          {
+            className: "openk9-paragraph-time",
+            $color: theme.palette.text.secondary,
+            $font: theme.typography.body2.font || "Roboto",
+            style: { alignSelf: !isChatbot ? "start" : "end" },
+            children: timeMessage
+          }
+        )
+      ]
+    }
+  );
+}
+const ParagraphTime = styled$2.p`
+  color: ${(props) => props.$color};
+  margin: 0px;
+  align-self: end;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: 1.2px;
+  word-spacing: 1.6px;
+  font-family: ${(props) => props.$font};
+`;
+const ParagraphMessage = styled$2.div`
+  color: ${(props) => props.$color};
+  margin: ${(props) => !props.$isLoading ? "0" : "16px"};
+  width: ${(props) => !props.$width};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  font-family: ${(props) => props.$font};
+  padding-block: 3px;
+`;
+const ParagraphName = styled$2.p`
+  color: ${(props) => props.$color};
+  font-weight: 700;
+  size: 10px;
+  line-height: 15.21px;
+  font-family: ${(props) => props.$font};
+`;
+const FocusableSection = styled$2.section`
+  padding-block: 0.2px;
+
+  &:focus {
+    outline: 2px solid ${(props) => props.$contraxtFocus};
+  }
+`;
+function generateAccessibleColor(theme) {
+  const MAX_TRIES = 20;
+  const bgColor = theme === "light" ? "#ffffff" : "#000000";
+  for (let i = 0; i < MAX_TRIES; i++) {
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = 80;
+    const lightness = theme === "light" ? 20 + Math.random() * 30 : 60 + Math.random() * 30;
+    const hex = hslToHex(hue, saturation, lightness);
+    if (hasGoodContrast(hex, bgColor, 6)) {
+      return hex;
+    }
+  }
+  return theme === "light" ? "#111111" : "#eeeeee";
+}
+function hexToRgb(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const num = parseInt(hex, 16);
+  return {
+    r: num >> 16 & 255,
+    g: num >> 8 & 255,
+    b: num & 255
+  };
+}
+function luminance(hex) {
+  const rgb = hexToRgb(hex);
+  const srgb = [rgb.r, rgb.g, rgb.b].map((c) => {
+    const c_ = c / 255;
+    return c_ <= 0.03928 ? c_ / 12.92 : Math.pow((c_ + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+function contrastRatio(fg, bg) {
+  const L1 = luminance(fg);
+  const L2 = luminance(bg);
+  return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+}
+function hasGoodContrast(fg, bg, minRatio = 6) {
+  return contrastRatio(fg, bg) >= minRatio;
+}
+function hslToHex(h, s, l) {
+  l /= 100;
+  const a = s * Math.min(l, 1 - l) / 100;
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color2 = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color2).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+const sourceColorMap = /* @__PURE__ */ new Map();
+function getStableColor(source, theme) {
+  if (!source) return theme === "light" ? "#666" : "#999";
+  if (!sourceColorMap.has(source)) {
+    const mappedColor = mappingColors(source, theme);
+    if (mappedColor) {
+      sourceColorMap.set(source, { light: mappedColor, dark: mappedColor });
+    } else {
+      sourceColorMap.set(source, {
+        light: generateAccessibleColor("light"),
+        dark: generateAccessibleColor("dark")
+      });
+    }
+  }
+  return sourceColorMap.get(source)[theme];
+}
+function mappingColors(source, theme) {
+  switch (source == null ? void 0 : source.toLowerCase()) {
+    case "ansa.it":
+      return theme === "light" ? "#1976d2" : "#42a5f5";
+    case "eurosport.it":
+      return theme === "light" ? "#d32f2f" : "#ef5350";
+    case "ilpost.it":
+      return theme === "light" ? "#388e3c" : "#66bb6a";
+    case "corriere.it":
+      return theme === "light" ? "#f57c00" : "#ffa726";
+    case "techreport.com":
+      return theme === "light" ? "#1976d2" : "#42a5f5";
+    case "openai.com":
+      return theme === "light" ? "#7b1fa2" : "#ab47bc";
+    case "meta.ai":
+      return theme === "light" ? "#1976d2" : "#42a5f5";
+    case "kaggle.com":
+      return theme === "light" ? "#f57c00" : "#ffa726";
+    case "ethics.ai":
+      return theme === "light" ? "#1976d2" : "#42a5f5";
+    case "coursera.org":
+      return theme === "light" ? "#d32f2f" : "#ef5350";
+    case "spotify.com":
+      return "#1dd15d";
+    case "arxiv.org":
+      return theme === "light" ? "#7b1fa2" : "#ab47bc";
+    case "github.com":
+      return theme === "light" ? "#24292e" : "#f0f6fc";
+    case "stackoverflow.com":
+      return theme === "light" ? "#f48024" : "#f69c3d";
+    case "medium.com":
+      return theme === "light" ? "#000000" : "#ffffff";
+    case "youtube.com":
+      return theme === "light" ? "#ff0000" : "#ff4444";
+    case "x.com":
+      return theme === "light" ? "#1da1f2" : "#1d9bf0";
+    case "linkedin.com":
+      return theme === "light" ? "#0077b5" : "#0a66c2";
+    case "reddit.com":
+      return theme === "light" ? "#ff4500" : "#ff6314";
+    case "wikipedia.org":
+      return theme === "light" ? "#000000" : "#ffffff";
+    default:
+      return void 0;
+  }
+}
+export {
+  SingleMessage as S,
+  createTheme as c
+};