UNPKG

iobroker.vis-2

Version:

Next generation graphical user interface for ioBroker.

1,318 lines (1,315 loc) 51.9 kB
import { g as __mf_14$1, p as __mf_15, j as __mf_17, __tla as __tla_0 } from "./iobroker_vis__loadShare__react__loadShare__.js-QKtVi7r1.js"; import { j as jsxRuntimeExports, __tla as __tla_1 } from "./jsx-runtime-DXKJPqi2.js"; import { __tla as __tla_2 } from "./iobroker_vis__loadShare__prop_mf_2_types__loadShare__.js-OoAqYupB.js"; import { d as deepmerge, f as formatMuiErrorMessage, i as isPlainObject, c as clsx, a as capitalize, __tla as __tla_3 } from "./clsx-DKpeWZFz.js"; import { c as __mf_14, d as __mf_41, A as __mf_47, __tla as __tla_4 } from "./iobroker_vis__loadShare___mf_0_mui_mf_1_system__loadShare__.js-Zvkdie3d.js"; import { j as getContrastRatio, l as lighten, d as darken, k as createTheme$1, m as defaultSxConfig, s as styleFunctionSx, p as private_safeDarken, n as private_safeLighten, o as private_safeEmphasize, q as private_safeAlpha, t as private_safeColorChannel, u as prepareCssVars, v as createUnarySpacing, w as createGetColorSchemeSelector, x as hslToRgb, y as createStyled, z as useDefaultProps$1, g as generateUtilityClass, a as generateUtilityClasses, c as composeClasses, __tla as __tla_5 } from "./createStyled-CtLRJdF1.js"; let shouldSkipGeneratingVar, svgIconClasses, defaultTheme, SvgIcon, THEME_ID, createTheme, createThemeWithVars, createSvgIcon, blue, common, grey, green, red, duration, slotShouldForwardProp, createColorScheme, lightBlue, memoTheme, createMuiTheme, orange, purple, createTransitions, rootShouldForwardProp, styled, easing, useDefaultProps, getOverlayAlpha, getSvgIconUtilityClass, createMixins, createTypography, excludeVariablesFromRoot; let __tla = Promise.all([ (() => { try { return __tla_0; } catch { } })(), (() => { try { return __tla_1; } catch { } })(), (() => { try { return __tla_2; } catch { } })(), (() => { try { return __tla_3; } catch { } })(), (() => { try { return __tla_4; } catch { } })(), (() => { try { return __tla_5; } catch { } })() ]).then(async () => { THEME_ID = "$$material"; common = { black: "#000", white: "#fff" }; 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" }; purple = { 50: "#f3e5f5", 100: "#e1bee7", 200: "#ce93d8", 300: "#ba68c8", 400: "#ab47bc", 500: "#9c27b0", 600: "#8e24aa", 700: "#7b1fa2", 800: "#6a1b9a", 900: "#4a148c", A100: "#ea80fc", A200: "#e040fb", A400: "#d500f9", A700: "#aa00ff" }; red = { 50: "#ffebee", 100: "#ffcdd2", 200: "#ef9a9a", 300: "#e57373", 400: "#ef5350", 500: "#f44336", 600: "#e53935", 700: "#d32f2f", 800: "#c62828", 900: "#b71c1c", A100: "#ff8a80", A200: "#ff5252", A400: "#ff1744", A700: "#d50000" }; orange = { 50: "#fff3e0", 100: "#ffe0b2", 200: "#ffcc80", 300: "#ffb74d", 400: "#ffa726", 500: "#ff9800", 600: "#fb8c00", 700: "#f57c00", 800: "#ef6c00", 900: "#e65100", A100: "#ffd180", A200: "#ffab40", A400: "#ff9100", A700: "#ff6d00" }; blue = { 50: "#e3f2fd", 100: "#bbdefb", 200: "#90caf9", 300: "#64b5f6", 400: "#42a5f5", 500: "#2196f3", 600: "#1e88e5", 700: "#1976d2", 800: "#1565c0", 900: "#0d47a1", A100: "#82b1ff", A200: "#448aff", A400: "#2979ff", A700: "#2962ff" }; lightBlue = { 50: "#e1f5fe", 100: "#b3e5fc", 200: "#81d4fa", 300: "#4fc3f7", 400: "#29b6f6", 500: "#03a9f4", 600: "#039be5", 700: "#0288d1", 800: "#0277bd", 900: "#01579b", A100: "#80d8ff", A200: "#40c4ff", A400: "#00b0ff", A700: "#0091ea" }; green = { 50: "#e8f5e9", 100: "#c8e6c9", 200: "#a5d6a7", 300: "#81c784", 400: "#66bb6a", 500: "#4caf50", 600: "#43a047", 700: "#388e3c", 800: "#2e7d32", 900: "#1b5e20", A100: "#b9f6ca", A200: "#69f0ae", A400: "#00e676", A700: "#00c853" }; function getLight() { return { text: { primary: "rgba(0, 0, 0, 0.87)", secondary: "rgba(0, 0, 0, 0.6)", disabled: "rgba(0, 0, 0, 0.38)" }, divider: "rgba(0, 0, 0, 0.12)", background: { paper: common.white, default: common.white }, action: { active: "rgba(0, 0, 0, 0.54)", hover: "rgba(0, 0, 0, 0.04)", hoverOpacity: 0.04, selected: "rgba(0, 0, 0, 0.08)", selectedOpacity: 0.08, disabled: "rgba(0, 0, 0, 0.26)", 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", 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; return contrastText; } const augmentColor = ({ color, name, mainShade = 500, lightShade = 300, darkShade = 700 }) => { color = { ...color }; if (!color.main && color[mainShade]) { color.main = color[mainShade]; } if (!color.hasOwnProperty("main")) { throw new Error(formatMuiErrorMessage(11, name ? ` (${name})` : "", mainShade)); } if (typeof color.main !== "string") { throw new Error(formatMuiErrorMessage(12, name ? ` (${name})` : "", JSON.stringify(color.main))); } addLightOrDark(color, "light", lightShade, tonalOffset); addLightOrDark(color, "dark", darkShade, tonalOffset); if (!color.contrastText) { color.contrastText = getContrastText(color.main); } return color; }; let modeHydrated; if (mode === "light") { modeHydrated = getLight(); } else if (mode === "dark") { modeHydrated = getDark(); } const paletteOutput = deepmerge({ common: { ...common }, mode, primary: augmentColor({ color: primary, name: "primary" }), secondary: augmentColor({ color: secondary, name: "secondary", mainShade: "A400", lightShade: "A200", darkShade: "A700" }), error: augmentColor({ color: error, name: "error" }), warning: augmentColor({ color: warning, name: "warning" }), info: augmentColor({ color: info, name: "info" }), success: augmentColor({ color: success, name: "success" }), grey, contrastThreshold, getContrastText, augmentColor, tonalOffset, ...modeHydrated }, other); return paletteOutput; } 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; } createMixins = function(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'; createTypography = function(palette, typography) { const { fontFamily = defaultFontFamily, fontSize = 14, fontWeightLight = 300, fontWeightRegular = 400, fontWeightMedium = 500, fontWeightBold = 700, htmlFontSize = 16, allVariants, pxToRem: pxToRem2, ...other } = typeof typography === "function" ? typography(palette) : typography; const coef = fontSize / 14; const pxToRem = pxToRem2 || ((size) => `${size / htmlFontSize * coef}rem`); const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({ fontFamily, fontWeight, fontSize: pxToRem(size), lineHeight, ...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), 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 }); }; 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) ]; easing = { easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)", easeOut: "cubic-bezier(0.0, 0, 0.2, 1)", easeIn: "cubic-bezier(0.4, 0, 1, 1)", sharp: "cubic-bezier(0.4, 0, 0.6, 1)" }; duration = { shortest: 150, shorter: 200, short: 250, standard: 300, complex: 375, enteringScreen: 225, leavingScreen: 195 }; function formatMs(milliseconds) { return `${Math.round(milliseconds)}ms`; } function getAutoHeightDuration(height) { if (!height) { return 0; } const constant = height / 36; return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3e3); } createTransitions = function(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; 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 && options.generateThemeVars === void 0) { throw new Error(formatMuiErrorMessage(20)); } const palette = createPalette(paletteInput); const systemTheme = createTheme$1(options); let muiTheme = deepmerge(systemTheme, { mixins: createMixins(systemTheme.breakpoints, mixinsInput), palette, 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); 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; } createMuiTheme = function(...args) { return createThemeNoVars(...args); }; getOverlayAlpha = function(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 : []; } createColorScheme = function(options) { const { palette: paletteInput = { mode: "light" }, opacity, overlays, ...rest } = options; const palette = createPalette(paletteInput); return { palette, opacity: { ...getOpacity(palette.mode), ...opacity }, overlays: overlays || getOverlays(palette.mode), ...rest }; }; shouldSkipGeneratingVar = function(keys) { var _a; return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) || keys[0] === "palette" && !!((_a = keys[1]) == null ? void 0 : _a.match(/(mode|contrastThreshold|tonalOffset)/)); }; 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(color) { if (typeof color !== "string" || !color.startsWith("hsl")) { return color; } return hslToRgb(color); } function setColorChannel(obj, key) { if (!(`${key}Channel` in obj)) { obj[`${key}Channel`] = private_safeColorChannel(toRgb(obj[key])); } } 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") => __mf_41(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; } createThemeWithVars = function(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(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 color = tokens[1]; const colorToken = tokens[2]; return getCssVar(cssVar, palette[color][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((color) => { const colors = palette[color]; if (color !== "tonalOffset" && colors && typeof colors === "object") { if (colors.main) { setColor(palette[color], "mainChannel", private_safeColorChannel(toRgb(colors.main))); } if (colors.light) { setColor(palette[color], "lightChannel", private_safeColorChannel(toRgb(colors.light))); } if (colors.dark) { setColor(palette[color], "darkChannel", private_safeColorChannel(toRgb(colors.dark))); } if (colors.contrastText) { setColor(palette[color], "contrastTextChannel", private_safeColorChannel(toRgb(colors.contrastText))); } if (color === "text") { setColorChannel(palette[color], "primary"); setColorChannel(palette[color], "secondary"); } if (color === "action") { if (colors.active) { setColorChannel(palette[color], "active"); } if (colors.selected) { setColorChannel(palette[color], "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 __mf_14(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 }) }; } } createTheme = function(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); }; defaultTheme = createTheme(); slotShouldForwardProp = function(prop) { return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as"; }; rootShouldForwardProp = (prop) => slotShouldForwardProp(prop) && prop !== "classes"; styled = createStyled({ themeId: THEME_ID, defaultTheme, rootShouldForwardProp }); memoTheme = __mf_47; useDefaultProps = function(params) { return useDefaultProps$1(params); }; getSvgIconUtilityClass = function(slot) { return generateUtilityClass("MuiSvgIcon", slot); }; svgIconClasses = generateUtilityClasses("MuiSvgIcon", [ "root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge" ]); const useUtilityClasses = (ownerState) => { const { color, fontSize, classes } = ownerState; const slots = { root: [ "root", color !== "inherit" && `color${capitalize(color)}`, `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: { 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" } }, ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color]) => { var _a2, _b2; return { props: { color }, style: { color: (_b2 = (_a2 = (theme.vars ?? theme).palette) == null ? void 0 : _a2[color]) == 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 } } ] }; })); SvgIcon = __mf_14$1(function SvgIcon2(inProps, ref) { const props = useDefaultProps({ props: inProps, name: "MuiSvgIcon" }); const { children, className, color = "inherit", component = "svg", fontSize = "medium", htmlColor, inheritViewBox = false, titleAccess, viewBox = "0 0 24 24", ...other } = props; const hasSvgAsChild = __mf_15(children) && children.type