td-plots 1.4.1 → 1.5.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { __spreadArray, __assign } from 'tslib';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { lazy, useRef, useState, useEffect, useMemo, Suspense } from 'react';
 import emStyled from '@emotion/styled';
@@ -57,6 +57,26 @@ function calculateMean(arr) {
         return sum / arr.length;
     }
 }
+// Calculate standard deviation of an array of numbers or dates
+function calculateStandardDeviation(arr) {
+    if (arr.length === 0)
+        return undefined;
+    var mean = calculateMean(arr);
+    if (mean === undefined)
+        return undefined;
+    var sumOfSquares = 0;
+    if (isNumberArray(arr)) {
+        sumOfSquares = arr.reduce(function (acc, num) { return acc + Math.pow(num - mean, 2); }, 0);
+    }
+    else if (isDateArray(arr)) {
+        sumOfSquares = arr.reduce(function (acc, date) { return acc + Math.pow(date.getTime() - mean, 2); }, 0);
+    }
+    else {
+        return undefined;
+    }
+    var variance = sumOfSquares / arr.length;
+    return Math.sqrt(variance);
+}
 // Utilities for rounding dates to the nearest day.
 // Helpful for making nice bins
 var roundToNextDay = function (timestamp) {
@@ -1372,8 +1392,8 @@ function requireReactIs_production () {
 	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
 	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	  REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	  REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
 	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
 	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
 	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
@@ -1543,8 +1563,8 @@ function requireReactIs_development () {
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
 	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
 	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
 	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
 	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
@@ -1715,7 +1735,7 @@ const responsivePropType = process.env.NODE_ENV !== 'production' ? PropTypes.one
  * For using in `sx` prop to sort the breakpoint from low to high.
  * Note: this function does not work and will not support multiple units.
  *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
- *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 even though 40rem > 300px
  */
 function sortContainerQueries(theme, css) {
   if (!theme.containerQueries) {
@@ -2740,7 +2760,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 
 /**
- * @mui/styled-engine v7.2.0
+ * @mui/styled-engine v7.3.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -3687,6 +3707,9 @@ function private_safeAlpha(color, value, warning) {
   try {
     return alpha(color, value);
   } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
     return color;
   }
 }
@@ -3713,6 +3736,9 @@ function private_safeDarken(color, coefficient, warning) {
   try {
     return darken(color, coefficient);
   } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
     return color;
   }
 }
@@ -3743,6 +3769,9 @@ function private_safeLighten(color, coefficient, warning) {
   try {
     return lighten(color, coefficient);
   } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
     return color;
   }
 }
@@ -3998,7 +4027,8 @@ function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector,
     disableCssColorScheme,
-    colorSchemeSelector: selector
+    colorSchemeSelector: selector,
+    enableContrastVars
   } = parserConfig;
   // @ts-ignore - ignore components do not exist
   const {
@@ -4136,6 +4166,16 @@ function prepareCssVars(theme, parserConfig = {}) {
         ...finalCss
       }), finalCss);
     });
+    if (enableContrastVars) {
+      stylesheets.push({
+        ':root': {
+          // use double underscore to indicate that these are private variables
+          '--__l-threshold': '0.7',
+          '--__l': 'clamp(0, (l / var(--__l-threshold) - 1) * -infinity, 1)',
+          '--__a': 'clamp(0.87, (l / var(--__l-threshold) - 1) * -infinity, 1)' // 0.87 is the default alpha value for black text.
+        }
+      });
+    }
     return stylesheets;
   };
   return {
@@ -4321,6 +4361,19 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
+function mixLightOrDark(colorSpace, 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 = `color-mix(in ${colorSpace}, ${intent.main}, #fff ${(tonalOffsetLight * 100).toFixed(0)}%)`;
+    } else if (direction === 'dark') {
+      intent.dark = `color-mix(in ${colorSpace}, ${intent.main}, #000 ${(tonalOffsetDark * 100).toFixed(0)}%)`;
+    }
+  }
+}
 function getDefaultPrimary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -4406,11 +4459,17 @@ function getDefaultWarning(mode = 'light') {
     dark: orange[900]
   };
 }
+
+// Use the same name as the experimental CSS `contrast-color` function.
+function contrastColor(background) {
+  return `oklch(from ${background} var(--__l) 0 h / var(--__a))`;
+}
 function createPalette(palette) {
   const {
     mode = 'light',
     contrastThreshold = 3,
     tonalOffset = 0.2,
+    colorSpace,
     ...other
   } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
@@ -4424,6 +4483,9 @@ function createPalette(palette) {
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
   function getContrastText(background) {
+    if (colorSpace) {
+      return contrastColor(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);
@@ -4452,8 +4514,13 @@ function createPalette(palette) {
     if (typeof color.main !== 'string') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
-    addLightOrDark(color, 'light', lightShade, tonalOffset);
-    addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    if (colorSpace) {
+      mixLightOrDark(colorSpace, color, 'light', lightShade, tonalOffset);
+      mixLightOrDark(colorSpace, color, 'dark', darkShade, tonalOffset);
+    } else {
+      addLightOrDark(color, 'light', lightShade, tonalOffset);
+      addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    }
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }
@@ -4818,6 +4885,58 @@ theme.transitions = createTransitions(theme.transitions || {});
 export default theme;`;
 }
 
+function coefficientToPercentage(coefficient) {
+  if (typeof coefficient === 'number') {
+    return `${(coefficient * 100).toFixed(0)}%`;
+  }
+  return `calc((${coefficient}) * 100%)`;
+}
+
+// This can be removed when moved to `color-mix()` entirely.
+const parseAddition = str => {
+  if (!Number.isNaN(+str)) {
+    return +str;
+  }
+  const numbers = str.match(/\d*\.?\d+/g);
+  if (!numbers) {
+    return 0;
+  }
+  let sum = 0;
+  for (let i = 0; i < numbers.length; i += 1) {
+    sum += +numbers[i];
+  }
+  return sum;
+};
+function attachColorManipulators(theme) {
+  Object.assign(theme, {
+    alpha(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `oklch(from ${color} l c h / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+      }
+      if (obj.vars) {
+        // To preserve the behavior of the CSS theme variables
+        // In the future, this could be replaced by `color-mix` (when https://caniuse.com/?search=color-mix reaches 95%).
+        return `rgba(${color.replace(/var\(--([^,\s)]+)(?:,[^)]+)?\)+/g, 'var(--$1Channel)')} / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+      }
+      return alpha(color, parseAddition(coefficient));
+    },
+    lighten(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color}, #fff ${coefficientToPercentage(coefficient)})`;
+      }
+      return lighten(color, coefficient);
+    },
+    darken(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color}, #000 ${coefficientToPercentage(coefficient)})`;
+      }
+      return darken(color, coefficient);
+    }
+  });
+}
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -4827,6 +4946,7 @@ function createThemeNoVars(options = {}, ...args) {
     transitions: transitionsInput = {},
     typography: typographyInput = {},
     shape: shapeInput,
+    colorSpace,
     ...other
   } = options;
   if (options.vars &&
@@ -4837,7 +4957,10 @@ function createThemeNoVars(options = {}, ...args) {
     // #host-reference
     'Please 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 palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   const systemTheme = createTheme$1(options);
   let muiTheme = deepmerge(systemTheme, {
     mixins: createMixins(systemTheme.breakpoints, mixinsInput),
@@ -4894,6 +5017,7 @@ function createThemeNoVars(options = {}, ...args) {
   };
   muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
 
+  attachColorManipulators(muiTheme);
   return muiTheme;
 }
 
@@ -4934,9 +5058,14 @@ function createColorScheme(options) {
     // need to cast to avoid module augmentation test
     opacity,
     overlays,
-    ...rest
+    colorSpace,
+    ...other
   } = options;
-  const palette = createPalette(paletteInput);
+  // need to cast because `colorSpace` is considered internal at the moment.
+  const palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   return {
     palette,
     opacity: {
@@ -4944,7 +5073,7 @@ function createColorScheme(options) {
       ...opacity
     },
     overlays: overlays || getOverlays(palette.mode),
-    ...rest
+    ...other
   };
 }
 
@@ -5062,7 +5191,7 @@ const silent = fn => {
   return undefined;
 };
 const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
-function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
+function attachColorScheme$1(colorSpace, colorSchemes, scheme, restTheme, colorScheme) {
   if (!scheme) {
     return undefined;
   }
@@ -5074,7 +5203,8 @@ function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
       palette: {
         mode,
         ...scheme?.palette
-      }
+      },
+      colorSpace
     });
     return undefined;
   }
@@ -5086,7 +5216,8 @@ function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
     palette: {
       mode,
       ...scheme?.palette
-    }
+    },
+    colorSpace
   });
   colorSchemes[colorScheme] = {
     ...scheme,
@@ -5116,6 +5247,7 @@ function createThemeWithVars(options = {}, ...args) {
     defaultColorScheme: defaultColorSchemeInput,
     disableCssColorScheme = false,
     cssVarPrefix = 'mui',
+    nativeColor = false,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
     rootSelector = ':root',
@@ -5143,13 +5275,19 @@ function createThemeWithVars(options = {}, ...args) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : formatMuiErrorMessage(21, defaultColorScheme));
   }
 
+  // The reason to use `oklch` is that it is the most perceptually uniform color space and widely supported.
+  let colorSpace;
+  if (nativeColor) {
+    colorSpace = 'oklch';
+  }
+
   // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
-  const muiTheme = attachColorScheme$1(colorSchemes, defaultScheme, input, defaultColorScheme);
+  const muiTheme = attachColorScheme$1(colorSpace, colorSchemes, defaultScheme, input, defaultColorScheme);
   if (builtInLight && !colorSchemes.light) {
-    attachColorScheme$1(colorSchemes, builtInLight, undefined, 'light');
+    attachColorScheme$1(colorSpace, colorSchemes, builtInLight, undefined, 'light');
   }
   if (builtInDark && !colorSchemes.dark) {
-    attachColorScheme$1(colorSchemes, builtInDark, undefined, 'dark');
+    attachColorScheme$1(colorSpace, colorSchemes, builtInDark, undefined, 'dark');
   }
   let theme = {
     defaultColorScheme,
@@ -5183,14 +5321,30 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.common, 'background', '#000');
       setColor(palette.common, 'onBackground', '#fff');
     }
+    function colorMix(method, color, coefficient) {
+      if (colorSpace) {
+        let mixer;
+        if (method === private_safeAlpha) {
+          mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
+        }
+        if (method === private_safeDarken) {
+          mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
+        }
+        if (method === private_safeLighten) {
+          mixer = `#fff ${(coefficient * 100).toFixed(0)}%`;
+        }
+        return `color-mix(in ${colorSpace}, ${color}, ${mixer})`;
+      }
+      return method(color, coefficient);
+    }
 
     // assign component variables
     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, 'errorColor', colorMix(private_safeDarken, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(private_safeDarken, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(private_safeDarken, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(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'));
@@ -5199,10 +5353,10 @@ function createThemeWithVars(options = {}, ...args) {
       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, 'errorStandardBg', colorMix(private_safeLighten, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(private_safeLighten, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(private_safeLighten, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(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'));
@@ -5217,41 +5371,42 @@ function createThemeWithVars(options = {}, ...args) {
       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.LinearProgress, 'primaryBg', colorMix(private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', colorMix(private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(private_safeLighten, palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(private_safeAlpha, palette.text.primary, 0.11) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', colorMix(private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', colorMix(private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', colorMix(private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', colorMix(private_safeLighten, palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(private_safeDarken, palette.background.default, 0.6825) // use `0.6825` instead of `0.8` to match the contrast ratio of JS implementation
+      : private_safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? dark.text.primary : 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));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(private_safeLighten, palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', colorMix(private_safeLighten, colorMix(private_safeAlpha, palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', colorMix(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, 'errorColor', colorMix(private_safeLighten, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(private_safeLighten, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(private_safeLighten, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(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'));
@@ -5260,10 +5415,10 @@ function createThemeWithVars(options = {}, ...args) {
       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, 'errorStandardBg', colorMix(private_safeDarken, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(private_safeDarken, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(private_safeDarken, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(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'));
@@ -5280,35 +5435,36 @@ function createThemeWithVars(options = {}, ...args) {
       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.LinearProgress, 'primaryBg', colorMix(private_safeDarken, palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(private_safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(private_safeDarken, palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(private_safeDarken, palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', colorMix(private_safeDarken, palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(private_safeDarken, palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(private_safeAlpha, palette.text.primary, 0.13) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(private_safeDarken, palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(private_safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', colorMix(private_safeDarken, palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', colorMix(private_safeDarken, palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', colorMix(private_safeDarken, palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', colorMix(private_safeDarken, palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(private_safeLighten, palette.background.default, 0.985) // use `0.985` instead of `0.98` to match the contrast ratio of JS implementation
+      : private_safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? light.text.primary : 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));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(private_safeDarken, palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(private_safeDarken, palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(private_safeDarken, palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(private_safeDarken, palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(private_safeDarken, palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(private_safeDarken, palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', colorMix(private_safeDarken, colorMix(private_safeAlpha, palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', colorMix(private_safeAlpha, palette.grey[700], 0.92));
     }
 
     // MUI X - DataGrid needs this token.
@@ -5360,7 +5516,8 @@ function createThemeWithVars(options = {}, ...args) {
     prefix: cssVarPrefix,
     disableCssColorScheme,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar$1,
-    getSelector: defaultGetSelector(theme)
+    getSelector: defaultGetSelector(theme),
+    enableContrastVars: nativeColor
   };
   const {
     vars,
@@ -5426,7 +5583,7 @@ function createTheme(options = {},
       light: true
     } : undefined,
     defaultColorScheme: initialDefaultColorScheme = palette?.mode,
-    ...rest
+    ...other
   } = options;
   const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
   const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
@@ -5483,7 +5640,7 @@ function createTheme(options = {},
     colorSchemesInput.light = true;
   }
   return createThemeWithVars({
-    ...rest,
+    ...other,
     colorSchemes: colorSchemesInput,
     defaultColorScheme: defaultColorSchemeInput,
     ...(typeof cssVariables !== 'boolean' && cssVariables)
@@ -5572,7 +5729,7 @@ function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
 function getCircularProgressUtilityClass(slot) {
   return generateUtilityClass('MuiCircularProgress', slot);
 }
-generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'track', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
@@ -5620,6 +5777,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `color${capitalize(color)}`],
     svg: ['svg'],
+    track: ['track'],
     circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']
   };
   return composeClasses(slots, getCircularProgressUtilityClass, classes);
@@ -5705,6 +5863,15 @@ const CircularProgressCircle = styled('circle', {
     }
   }]
 })));
+const CircularProgressTrack = styled('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Track'
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  opacity: (theme.vars || theme).palette.action.activatedOpacity
+})));
 
 /**
  * ## ARIA
@@ -5722,6 +5889,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     className,
     color = 'primary',
     disableShrink = false,
+    enableTrackSlot = false,
     size = 40,
     style,
     thickness = 3.6,
@@ -5736,7 +5904,8 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     size,
     thickness,
     value,
-    variant
+    variant,
+    enableTrackSlot
   };
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
@@ -5762,11 +5931,20 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /*#__PURE__*/jsx(CircularProgressSVG, {
+    children: /*#__PURE__*/jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /*#__PURE__*/jsx(CircularProgressCircle, {
+      children: [enableTrackSlot ? /*#__PURE__*/jsx(CircularProgressTrack, {
+        className: classes.track,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness,
+        "aria-hidden": "true"
+      }) : null, /*#__PURE__*/jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState: ownerState,
@@ -5775,7 +5953,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         r: (SIZE - thickness) / 2,
         fill: "none",
         strokeWidth: thickness
-      })
+      })]
     })
   });
 });
@@ -5810,6 +5988,12 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-pro
     }
     return null;
   }),
+  /**
+   * If `true`, a track circle slot is mounted to show a subtle background for the progress.
+   * The `size` and `thickness` apply to the track slot to be consistent with the progress circle.
+   * @default false
+   */
+  enableTrackSlot: PropTypes.bool,
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
@@ -5851,12 +6035,12 @@ var Loading = function () {
 
 var Plot$2 = lazy(function () { return import('react-plotly.js'); });
 var HistogramPlot = function (props) {
-    var _a, _b;
-    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLines, showMeanLines = _f === void 0 ? true : _f, containerStyleOverrides = props.containerStyleOverrides, _g = props.unselectedData, unselectedData = _g === void 0 ? [] : _g, _h = props.handleClickOrSelection, handleClickOrSelection = _h === void 0 ? function () { } : _h, _j = props.onDeselect, onDeselect = _j === void 0 ? function () { } : _j, plotId = props.plotId, _k = props.selectByBin, selectByBin = _k === void 0 ? false : _k, dateTickFormat = props.dateTickFormat, binSizeOverride = props.binSizeOverride;
+    var _a, _b, _c, _d;
+    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _e = props.barColor, barColor = _e === void 0 ? 'rgb(72, 72, 74)' : _e, _f = props.unselectedBarColor, unselectedBarColor = _f === void 0 ? 'rgba(203, 195, 195, 0.88)' : _f, _g = props.selectorsColor, selectorsColor = _g === void 0 ? 'black' : _g, containerStyleOverrides = props.containerStyleOverrides, _h = props.unselectedData, unselectedData = _h === void 0 ? [] : _h, _j = props.handleClickOrSelection, handleClickOrSelection = _j === void 0 ? function () { } : _j, _k = props.onDeselect, onDeselect = _k === void 0 ? function () { } : _k, plotId = props.plotId, _l = props.selectByBin, selectByBin = _l === void 0 ? false : _l, dateTickFormat = props.dateTickFormat, binSizeOverride = props.binSizeOverride, _m = props.statsAnnotations, statsAnnotations = _m === void 0 ? ['mean'] : _m;
     // Ref for plot container
     var containerRef = useRef(null);
     // Track any selections made in this plot so we can style the selection box.
-    var _l = useState(null), selectedRange = _l[0], setSelectedRange = _l[1];
+    var _o = useState(null), selectedRange = _o[0], setSelectedRange = _o[1];
     // If all the data becomes selected, we should forget any old selections.
     useEffect(function () {
         if (unselectedData.length === 0) {
@@ -5868,7 +6052,7 @@ var HistogramPlot = function (props) {
     // Plotly determines "nice" bins which consequently means it internally decides the axis range. We need
     // to access that information once the plot has been initialized so that we can prevent the
     // axis range from changing during interaction. Dates use strings.
-    var _m = useState(undefined), fixedXAxisRange = _m[0], setFixedXAxisRange = _m[1];
+    var _p = useState(undefined), fixedXAxisRange = _p[0], setFixedXAxisRange = _p[1];
     // Once the plot is drawn, record the initial axis range so we can keep it fixed.
     // figure should be Readonly<Plotly.Figure> but react-plotly.js doesn't expose that type, so we use any.
     var handlePlotUpdate = function (figure, graphDiv) {
@@ -6037,8 +6221,9 @@ var HistogramPlot = function (props) {
     }, [selectedRange, unselectedData]);
     // Calculate the mean of the selected data using normalized data
     var meanValue = (_a = calculateMean(data)) !== null && _a !== void 0 ? _a : 0; // Default to 0 if no data
+    var stdevValue = (_b = calculateStandardDeviation(data)) !== null && _b !== void 0 ? _b : 0;
     var meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
-    var meanLine = (showMeanLines && data.length > 0) ? [{
+    var meanLine = (statsAnnotations.includes('mean') && data.length > 0) ? [{
             type: 'line',
             x0: meanValue,
             y0: 1 - meanLineRadius,
@@ -6052,8 +6237,8 @@ var HistogramPlot = function (props) {
         }] : [];
     // Draw mean line for all data
     var allData = __spreadArray(__spreadArray([], data, true), unselectedData, true);
-    var allDataMeanValue = (_b = calculateMean(allData)) !== null && _b !== void 0 ? _b : 0;
-    var allDataMeanLine = (showMeanLines && unselectedData.length > 0 && data.length > 0) ? [{
+    var allDataMeanValue = (_c = calculateMean(allData)) !== null && _c !== void 0 ? _c : 0;
+    var allDataMeanLine = (statsAnnotations.includes('mean') && unselectedData.length > 0 && data.length > 0) ? [{
             type: 'line',
             x0: allDataMeanValue,
             y0: 1 - meanLineRadius,
@@ -6065,6 +6250,61 @@ var HistogramPlot = function (props) {
                 width: 1.5,
             }
         }] : [];
+    var stdevLines = (statsAnnotations.includes('stdev') && data.length > 0) ? [{
+            type: 'line',
+            x0: meanValue - stdevValue,
+            y0: 1 - meanLineRadius,
+            x1: meanValue - stdevValue,
+            yref: 'paper',
+            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+            line: {
+                color: barColor,
+                width: 1.5,
+                dash: 'dot',
+            }
+        },
+        {
+            type: 'line',
+            x0: meanValue + stdevValue,
+            y0: 1 - meanLineRadius,
+            x1: meanValue + stdevValue,
+            yref: 'paper',
+            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+            line: {
+                color: barColor,
+                width: 1.5,
+                dash: 'dot',
+            }
+        }]
+        : [];
+    var allDataStdevValue = (_d = calculateStandardDeviation(allData)) !== null && _d !== void 0 ? _d : 0;
+    var allDataStdevLines = (statsAnnotations.includes('stdev') && unselectedData.length > 0 && data.length > 0) ? [{
+            type: 'line',
+            x0: allDataMeanValue - allDataStdevValue,
+            y0: 1 - meanLineRadius,
+            x1: allDataMeanValue - allDataStdevValue,
+            yref: 'paper',
+            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+            line: {
+                color: unselectedBarColor,
+                width: 1.5,
+                dash: 'dot',
+            }
+        },
+        {
+            type: 'line',
+            x0: allDataMeanValue + allDataStdevValue,
+            y0: 1 - meanLineRadius,
+            x1: allDataMeanValue + allDataStdevValue,
+            yref: 'paper',
+            y1: 1 + meanLineRadius + 0.04, // Add extra length above to make the line look centered on the y-axis top.
+            line: {
+                color: unselectedBarColor,
+                width: 1.5,
+                dash: 'dot',
+            }
+        }]
+        : [];
     // If binSizeOverride is provided, use it to set the bin size and range explicitly. 
     // Plotly does a better job of setting bins and ending them at nice numbers, so only use
     // this prop when necessary.
@@ -6100,6 +6340,40 @@ var HistogramPlot = function (props) {
         },
         hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text
     };
+    var meanAnnotation = (statsAnnotations.includes('mean') && meanLine && data.length > 0) ? [{
+            x: meanValue,
+            y: 1 + meanLineRadius + 0.04, // Position above the mean line. Value set with respect to the paper coordinates.
+            yref: 'paper',
+            text: "<span style=\"font-weight:300\">AVG </span><span style=\"font-weight:600\">".concat(isDateArray(data) ? new Date(meanValue).toLocaleDateString('en-US', {
+                month: '2-digit',
+                day: '2-digit',
+                year: '2-digit'
+            }) : meanValue.toFixed(2), "</span>"),
+            xanchor: 'center',
+            yanchor: 'bottom',
+            showarrow: false,
+            font: {
+                color: barColor,
+                size: 12,
+            },
+        }] : [];
+    var stdevAnnotation = (statsAnnotations.includes('stdev') && stdevLines && data.length > 0) ? [{
+            x: meanValue, // Draw above the mean annotation
+            y: 1 + meanLineRadius + (statsAnnotations.includes('mean') ? 0.11 : 0.04),
+            yref: 'paper',
+            text: "<span style=\"font-weight:300\">\u03C3 </span><span style=\"font-weight:600\">&plusmn;".concat(isDateArray(data) ? new Date(stdevValue).toLocaleDateString('en-US', {
+                month: '2-digit',
+                day: '2-digit',
+                year: '2-digit'
+            }) : stdevValue.toFixed(2), "</span>"),
+            xanchor: 'center',
+            yanchor: 'bottom',
+            showarrow: false,
+            font: {
+                color: barColor,
+                size: 12,
+            },
+        }] : [];
     var plotlyData = [
         {
             x: data,
@@ -6132,7 +6406,7 @@ var HistogramPlot = function (props) {
         margin: {
             l: 50,
             r: 35, // Balance between ensuring the mean annotation doesn't get cut off and having too much margin.  
-            t: title ? 80 : 30,
+            t: 40 + (title ? 50 : 0), // Add extra top margin if there is a title
             b: 50,
             pad: 4
         },
@@ -6178,24 +6452,8 @@ var HistogramPlot = function (props) {
         bargap: 0.03, // Gap between bars
         dragmode: 'select', // Enable drag to select
         selectdirection: 'h', // User can select in horizontal direction only
-        shapes: __spreadArray(__spreadArray(__spreadArray([], allDataMeanLine, true), meanLine, true), selectedRangeBox, true), // Add the mean line and selection box
-        annotations: (showMeanLines && meanLine && data.length > 0) ? [{
-                x: meanValue,
-                y: 1 + meanLineRadius + 0.04, // Position above the mean line. Value set with respect to the paper coordinates.
-                yref: 'paper',
-                text: "<span style=\"font-weight:300\">AVG </span><span style=\"font-weight:600\">".concat(isDateArray(data) ? new Date(meanValue).toLocaleDateString('en-US', {
-                    month: '2-digit',
-                    day: '2-digit',
-                    year: '2-digit'
-                }) : meanValue.toFixed(2), "</span>"),
-                xanchor: 'center',
-                yanchor: 'bottom',
-                showarrow: false,
-                font: {
-                    color: barColor,
-                    size: 12,
-                },
-            }] : [],
+        shapes: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], allDataMeanLine, true), meanLine, true), selectedRangeBox, true), stdevLines, true), allDataStdevLines, true), // Add the mean line and selection box
+        annotations: __spreadArray(__spreadArray([], meanAnnotation, true), stdevAnnotation, true)
     };
     var config = {
         responsive: true, // Make the plot responsive