UNPKG

@material-ui/core

Version:

React components that implement Google's Material Design.

1,523 lines (1,333 loc) 1.12 MB
/** @license Material-UI v4.3.0 * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) : typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) : (global = global || self, factory(global.MaterialUI = {}, global.React, global.ReactDOM)); }(this, function (exports, React, ReactDOM) { 'use strict'; var React__default = 'default' in React ? React['default'] : React; var ReactDOM__default = 'default' in ReactDOM ? ReactDOM['default'] : ReactDOM; var common = { black: '#000', white: '#fff' }; var 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' }; var pink = { 50: '#fce4ec', 100: '#f8bbd0', 200: '#f48fb1', 300: '#f06292', 400: '#ec407a', 500: '#e91e63', 600: '#d81b60', 700: '#c2185b', 800: '#ad1457', 900: '#880e4f', A100: '#ff80ab', A200: '#ff4081', A400: '#f50057', A700: '#c51162' }; var 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' }; var deepPurple = { 50: '#ede7f6', 100: '#d1c4e9', 200: '#b39ddb', 300: '#9575cd', 400: '#7e57c2', 500: '#673ab7', 600: '#5e35b1', 700: '#512da8', 800: '#4527a0', 900: '#311b92', A100: '#b388ff', A200: '#7c4dff', A400: '#651fff', A700: '#6200ea' }; var indigo = { 50: '#e8eaf6', 100: '#c5cae9', 200: '#9fa8da', 300: '#7986cb', 400: '#5c6bc0', 500: '#3f51b5', 600: '#3949ab', 700: '#303f9f', 800: '#283593', 900: '#1a237e', A100: '#8c9eff', A200: '#536dfe', A400: '#3d5afe', A700: '#304ffe' }; var 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' }; var 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' }; var cyan = { 50: '#e0f7fa', 100: '#b2ebf2', 200: '#80deea', 300: '#4dd0e1', 400: '#26c6da', 500: '#00bcd4', 600: '#00acc1', 700: '#0097a7', 800: '#00838f', 900: '#006064', A100: '#84ffff', A200: '#18ffff', A400: '#00e5ff', A700: '#00b8d4' }; var teal = { 50: '#e0f2f1', 100: '#b2dfdb', 200: '#80cbc4', 300: '#4db6ac', 400: '#26a69a', 500: '#009688', 600: '#00897b', 700: '#00796b', 800: '#00695c', 900: '#004d40', A100: '#a7ffeb', A200: '#64ffda', A400: '#1de9b6', A700: '#00bfa5' }; var 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' }; var lightGreen = { 50: '#f1f8e9', 100: '#dcedc8', 200: '#c5e1a5', 300: '#aed581', 400: '#9ccc65', 500: '#8bc34a', 600: '#7cb342', 700: '#689f38', 800: '#558b2f', 900: '#33691e', A100: '#ccff90', A200: '#b2ff59', A400: '#76ff03', A700: '#64dd17' }; var lime = { 50: '#f9fbe7', 100: '#f0f4c3', 200: '#e6ee9c', 300: '#dce775', 400: '#d4e157', 500: '#cddc39', 600: '#c0ca33', 700: '#afb42b', 800: '#9e9d24', 900: '#827717', A100: '#f4ff81', A200: '#eeff41', A400: '#c6ff00', A700: '#aeea00' }; var yellow = { 50: '#fffde7', 100: '#fff9c4', 200: '#fff59d', 300: '#fff176', 400: '#ffee58', 500: '#ffeb3b', 600: '#fdd835', 700: '#fbc02d', 800: '#f9a825', 900: '#f57f17', A100: '#ffff8d', A200: '#ffff00', A400: '#ffea00', A700: '#ffd600' }; var amber = { 50: '#fff8e1', 100: '#ffecb3', 200: '#ffe082', 300: '#ffd54f', 400: '#ffca28', 500: '#ffc107', 600: '#ffb300', 700: '#ffa000', 800: '#ff8f00', 900: '#ff6f00', A100: '#ffe57f', A200: '#ffd740', A400: '#ffc400', A700: '#ffab00' }; var 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' }; var deepOrange = { 50: '#fbe9e7', 100: '#ffccbc', 200: '#ffab91', 300: '#ff8a65', 400: '#ff7043', 500: '#ff5722', 600: '#f4511e', 700: '#e64a19', 800: '#d84315', 900: '#bf360c', A100: '#ff9e80', A200: '#ff6e40', A400: '#ff3d00', A700: '#dd2c00' }; var brown = { 50: '#efebe9', 100: '#d7ccc8', 200: '#bcaaa4', 300: '#a1887f', 400: '#8d6e63', 500: '#795548', 600: '#6d4c41', 700: '#5d4037', 800: '#4e342e', 900: '#3e2723', A100: '#d7ccc8', A200: '#bcaaa4', A400: '#8d6e63', A700: '#5d4037' }; var grey = { 50: '#fafafa', 100: '#f5f5f5', 200: '#eeeeee', 300: '#e0e0e0', 400: '#bdbdbd', 500: '#9e9e9e', 600: '#757575', 700: '#616161', 800: '#424242', 900: '#212121', A100: '#d5d5d5', A200: '#aaaaaa', A400: '#303030', A700: '#616161' }; var blueGrey = { 50: '#eceff1', 100: '#cfd8dc', 200: '#b0bec5', 300: '#90a4ae', 400: '#78909c', 500: '#607d8b', 600: '#546e7a', 700: '#455a64', 800: '#37474f', 900: '#263238', A100: '#cfd8dc', A200: '#b0bec5', A400: '#78909c', A700: '#455a64' }; var index = /*#__PURE__*/Object.freeze({ common: common, red: red, pink: pink, purple: purple, deepPurple: deepPurple, indigo: indigo, blue: blue, lightBlue: lightBlue, cyan: cyan, teal: teal, green: green, lightGreen: lightGreen, lime: lime, yellow: yellow, amber: amber, orange: orange, deepOrange: deepOrange, brown: brown, grey: grey, blueGrey: blueGrey }); var global$1 = (typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}); if (typeof global$1.setTimeout === 'function') ; if (typeof global$1.clearTimeout === 'function') ; // from https://github.com/kumavis/browser-process-hrtime/blob/master/index.js var performance$1 = global$1.performance || {}; var performanceNow = performance$1.now || performance$1.mozNow || performance$1.msNow || performance$1.oNow || performance$1.webkitNow || function(){ return (new Date()).getTime() }; var warning = function() {}; { var printWarning = function printWarning(format, args) { var len = arguments.length; args = new Array(len > 1 ? len - 1 : 0); for (var key = 1; key < len; key++) { args[key - 1] = arguments[key]; } var argIndex = 0; var message = 'Warning: ' + format.replace(/%s/g, function() { return args[argIndex++]; }); if (typeof console !== 'undefined') { console.error(message); } try { // --- Welcome to debugging React --- // This error was thrown as a convenience so that you can use this stack // to find the callsite that caused this warning to fire. throw new Error(message); } catch (x) {} }; warning = function(condition, format, args) { var len = arguments.length; args = new Array(len > 2 ? len - 2 : 0); for (var key = 2; key < len; key++) { args[key - 2] = arguments[key]; } if (format === undefined) { throw new Error( '`warning(condition, format, ...args)` requires a warning ' + 'message argument' ); } if (!condition) { printWarning.apply(null, [format].concat(args)); } }; } var warning_1 = warning; /** * Returns a number whose value is limited to the given range. * * @param {number} value The value to be clamped * @param {number} min The lower boundary of the output range * @param {number} max The upper boundary of the output range * @returns {number} A number in the range [min, max] */ function clamp(value) { var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; warning_1(value >= min && value <= max, "Material-UI: the value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "].")) ; if (value < min) { return min; } if (value > max) { return max; } return value; } /** * Converts a color from CSS hex format to CSS rgb format. * * @param {string} color - Hex color, i.e. #nnn or #nnnnnn * @returns {string} A CSS rgb color string */ function hexToRgb(color) { color = color.substr(1); var re = new RegExp(".{1,".concat(color.length / 3, "}"), 'g'); var colors = color.match(re); if (colors && colors[0].length === 1) { colors = colors.map(function (n) { return n + n; }); } return colors ? "rgb(".concat(colors.map(function (n) { return parseInt(n, 16); }).join(', '), ")") : ''; } /** * Converts a color from hsl format to rgb format. * * @param {string} color - HSL color values * @returns {string} rgb color values */ function hslToRgb(color) { color = decomposeColor(color); var _color = color, values = _color.values; var h = values[0]; var s = values[1] / 100; var l = values[2] / 100; var a = s * Math.min(l, 1 - l); var f = function f(n) { var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12; return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); }; var type = 'rgb'; var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)]; if (color.type === 'hsla') { type += 'a'; rgb.push(values[3]); } return recomposeColor({ type: type, values: rgb }); } /** * Returns an object with the type and values of a color. * * Note: Does not support rgb % values. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @returns {object} - A MUI color object: {type: string, values: number[]} */ function decomposeColor(color) { // Idempotent if (color.type) { return color; } if (color.charAt(0) === '#') { return decomposeColor(hexToRgb(color)); } var marker = color.indexOf('('); var type = color.substring(0, marker); if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) { throw new Error(["Material-UI: unsupported `".concat(color, "` color."), 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().'].join('\n')); } var values = color.substring(marker + 1, color.length - 1).split(','); values = values.map(function (value) { return parseFloat(value); }); return { type: type, values: values }; } /** * Converts a color object with type and values to a string. * * @param {object} color - Decomposed color * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla' * @param {array} color.values - [n,n,n] or [n,n,n,n] * @returns {string} A CSS color string */ function recomposeColor(color) { var type = color.type; var values = color.values; if (type.indexOf('rgb') !== -1) { // Only convert the first 3 values to int (i.e. not alpha) values = values.map(function (n, i) { return i < 3 ? parseInt(n, 10) : n; }); } else if (type.indexOf('hsl') !== -1) { values[1] = "".concat(values[1], "%"); values[2] = "".concat(values[2], "%"); } return "".concat(type, "(").concat(values.join(', '), ")"); } /** * Calculates the contrast ratio between two colors. * * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests * * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @returns {number} A contrast ratio value in the range 0 - 21. */ function getContrastRatio(foreground, background) { var lumA = getLuminance(foreground); var lumB = getLuminance(background); return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05); } /** * The relative brightness of any point in a color space, * normalized to 0 for darkest black and 1 for lightest white. * * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @returns {number} The relative brightness of the color in the range 0 - 1 */ function getLuminance(color) { color = decomposeColor(color); var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values; rgb = rgb.map(function (val) { val /= 255; // normalized return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4); }); // Truncate at 3 digits return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3)); } /** * Darken or lighten a color, depending on its luminance. * Light colors are darkened, dark colors are lightened. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {number} coefficient=0.15 - multiplier in the range 0 - 1 * @returns {string} A CSS color string. Hex input values are returned as rgb */ function emphasize(color) { var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15; return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); } /** * Set the absolute transparency of a color. * Any existing alpha values are overwritten. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {number} value - value to set the alpha channel to in the range 0 -1 * @returns {string} A CSS color string. Hex input values are returned as rgb */ function fade(color, value) { color = decomposeColor(color); value = clamp(value); if (color.type === 'rgb' || color.type === 'hsl') { color.type += 'a'; } color.values[3] = value; return recomposeColor(color); } /** * Darkens a color. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {number} coefficient - multiplier in the range 0 - 1 * @returns {string} A CSS color string. Hex input values are returned as rgb */ function darken(color, coefficient) { color = decomposeColor(color); coefficient = clamp(coefficient); if (color.type.indexOf('hsl') !== -1) { color.values[2] *= 1 - coefficient; } else if (color.type.indexOf('rgb') !== -1) { for (var i = 0; i < 3; i += 1) { color.values[i] *= 1 - coefficient; } } return recomposeColor(color); } /** * Lightens a color. * * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() * @param {number} coefficient - multiplier in the range 0 - 1 * @returns {string} A CSS color string. Hex input values are returned as rgb */ function lighten(color, coefficient) { color = decomposeColor(color); coefficient = clamp(coefficient); if (color.type.indexOf('hsl') !== -1) { color.values[2] += (100 - color.values[2]) * coefficient; } else if (color.type.indexOf('rgb') !== -1) { for (var i = 0; i < 3; i += 1) { color.values[i] += (255 - color.values[i]) * coefficient; } } return recomposeColor(color); } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } var isMergeableObject = function isMergeableObject(value) { return isNonNullObject(value) && !isSpecial(value) }; function isNonNullObject(value) { return !!value && typeof value === 'object' } function isSpecial(value) { var stringValue = Object.prototype.toString.call(value); return stringValue === '[object RegExp]' || stringValue === '[object Date]' || isReactElement(value) } // see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25 var canUseSymbol = typeof Symbol === 'function' && Symbol.for; var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7; function isReactElement(value) { return value.$$typeof === REACT_ELEMENT_TYPE } function emptyTarget(val) { return Array.isArray(val) ? [] : {} } function cloneUnlessOtherwiseSpecified(value, options) { return (options.clone !== false && options.isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, options) : value } function defaultArrayMerge(target, source, options) { return target.concat(source).map(function(element) { return cloneUnlessOtherwiseSpecified(element, options) }) } function getMergeFunction(key, options) { if (!options.customMerge) { return deepmerge } var customMerge = options.customMerge(key); return typeof customMerge === 'function' ? customMerge : deepmerge } function getEnumerableOwnPropertySymbols(target) { return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) { return target.propertyIsEnumerable(symbol) }) : [] } function getKeys(target) { return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target)) } function mergeObject(target, source, options) { var destination = {}; if (options.isMergeableObject(target)) { getKeys(target).forEach(function(key) { destination[key] = cloneUnlessOtherwiseSpecified(target[key], options); }); } getKeys(source).forEach(function(key) { if (!options.isMergeableObject(source[key]) || !target[key]) { destination[key] = cloneUnlessOtherwiseSpecified(source[key], options); } else { destination[key] = getMergeFunction(key, options)(target[key], source[key], options); } }); return destination } function deepmerge(target, source, options) { options = options || {}; options.arrayMerge = options.arrayMerge || defaultArrayMerge; options.isMergeableObject = options.isMergeableObject || isMergeableObject; var sourceIsArray = Array.isArray(source); var targetIsArray = Array.isArray(target); var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray; if (!sourceAndTargetTypesMatch) { return cloneUnlessOtherwiseSpecified(source, options) } else if (sourceIsArray) { return options.arrayMerge(target, source, options) } else { return mergeObject(target, source, options) } } deepmerge.all = function deepmergeAll(array, options) { if (!Array.isArray(array)) { throw new Error('first argument should be an array') } return array.reduce(function(prev, next) { return deepmerge(prev, next, options) }, {}) }; var deepmerge_1 = deepmerge; var cjs = deepmerge_1; /*! * isobject <https://github.com/jonschlinkert/isobject> * * Copyright (c) 2014-2017, Jon Schlinkert. * Released under the MIT License. */ function isObject(val) { return val != null && typeof val === 'object' && Array.isArray(val) === false; } /*! * is-plain-object <https://github.com/jonschlinkert/is-plain-object> * * Copyright (c) 2014-2017, Jon Schlinkert. * Released under the MIT License. */ function isObjectObject(o) { return isObject(o) === true && Object.prototype.toString.call(o) === '[object Object]'; } function isPlainObject(o) { var ctor,prot; if (isObjectObject(o) === false) return false; // If has modified constructor ctor = o.constructor; if (typeof ctor !== 'function') return false; // If has modified prototype prot = ctor.prototype; if (isObjectObject(prot) === false) return false; // If constructor does not have an Object-specific method if (prot.hasOwnProperty('isPrototypeOf') === false) { return false; } // Most likely a plain Object return true; } // Sorted ASC by size. That's important. // It can't be configured as it's used statically for propTypes. var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification. function createBreakpoints(breakpoints) { var _breakpoints$values = breakpoints.values, values = _breakpoints$values === void 0 ? { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 } : _breakpoints$values, _breakpoints$unit = breakpoints.unit, unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit, _breakpoints$step = breakpoints.step, step = _breakpoints$step === void 0 ? 5 : _breakpoints$step, other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]); function up(key) { var value = typeof values[key] === 'number' ? values[key] : key; return "@media (min-width:".concat(value).concat(unit, ")"); } function down(key) { var endIndex = keys.indexOf(key) + 1; var upperbound = values[keys[endIndex]]; if (endIndex === keys.length) { // xl down applies to all sizes return up('xs'); } var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key; return "@media (max-width:".concat(value - step / 100).concat(unit, ")"); } function between(start, end) { var endIndex = keys.indexOf(end) + 1; if (endIndex === keys.length) { return up(start); } return "@media (min-width:".concat(values[start]).concat(unit, ") and ") + "(max-width:".concat(values[keys[endIndex]] - step / 100).concat(unit, ")"); } function only(key) { return between(key, key); } function width(key) { return values[key]; } return _extends({ keys: keys, values: values, up: up, down: down, between: between, only: only, width: width }, other); } // import warning from 'warning'; function createMixins(breakpoints, spacing, mixins) { var _toolbar; return _extends({ gutters: function gutters() { var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // To deprecate in v4.1 // warning( // false, // [ // 'Material-UI: theme.mixins.gutters() is deprecated.', // 'You can use the source of the mixin directly:', // ` // paddingLeft: theme.spacing(2), // paddingRight: theme.spacing(2), // [theme.breakpoints.up('sm')]: { // paddingLeft: theme.spacing(3), // paddingRight: theme.spacing(3), // }, // `, // ].join('\n'), // ); return _extends({ paddingLeft: spacing(2), paddingRight: spacing(2) }, styles, _defineProperty({}, breakpoints.up('sm'), _extends({ paddingLeft: spacing(3), paddingRight: spacing(3) }, styles[breakpoints.up('sm')]))); }, toolbar: (_toolbar = { minHeight: 56 }, _defineProperty(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), { minHeight: 48 }), _defineProperty(_toolbar, breakpoints.up('sm'), { minHeight: 64 }), _toolbar) }, mixins); } var light = { // 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.54)', // Disabled text have even lower visual prominence. disabled: 'rgba(0, 0, 0, 0.38)', // Text hints. hint: '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: grey[50] }, // 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.08)', hoverOpacity: 0.08, // The color of a selected action. selected: 'rgba(0, 0, 0, 0.14)', // 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)' } }; var dark = { text: { primary: common.white, secondary: 'rgba(255, 255, 255, 0.7)', disabled: 'rgba(255, 255, 255, 0.5)', hint: 'rgba(255, 255, 255, 0.5)', icon: 'rgba(255, 255, 255, 0.5)' }, divider: 'rgba(255, 255, 255, 0.12)', background: { paper: grey[800], default: '#303030' }, action: { active: common.white, hover: 'rgba(255, 255, 255, 0.1)', hoverOpacity: 0.1, selected: 'rgba(255, 255, 255, 0.2)', disabled: 'rgba(255, 255, 255, 0.3)', disabledBackground: 'rgba(255, 255, 255, 0.12)' } }; function addLightOrDark(intent, direction, shade, tonalOffset) { if (!intent[direction]) { if (intent.hasOwnProperty(shade)) { intent[direction] = intent[shade]; } else if (direction === 'light') { intent.light = lighten(intent.main, tonalOffset); } else if (direction === 'dark') { intent.dark = darken(intent.main, tonalOffset * 1.5); } } } function createPalette(palette) { var _palette$primary = palette.primary, primary = _palette$primary === void 0 ? { light: indigo[300], main: indigo[500], dark: indigo[700] } : _palette$primary, _palette$secondary = palette.secondary, secondary = _palette$secondary === void 0 ? { light: pink.A200, main: pink.A400, dark: pink.A700 } : _palette$secondary, _palette$error = palette.error, error = _palette$error === void 0 ? { light: red[300], main: red[500], dark: red[700] } : _palette$error, _palette$type = palette.type, type = _palette$type === void 0 ? 'light' : _palette$type, _palette$contrastThre = palette.contrastThreshold, contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre, _palette$tonalOffset = palette.tonalOffset, tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset, other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "type", "contrastThreshold", "tonalOffset"]); // Use the same logic as // 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) { warning_1(background, "Material-UI: missing background argument in getContrastText(".concat(background, ").")) ; var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary; { var contrast = getContrastRatio(background, contrastText); warning_1(contrast >= 3, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG 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; } function augmentColor(color) { var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500; var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300; var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700; color = _extends({}, color); if (!color.main && color[mainShade]) { color.main = color[mainShade]; } if ( !color.main) { throw new Error(['Material-UI: the color provided to augmentColor(color) is invalid.', "The color object needs to have a `main` property or a `".concat(mainShade, "` property.")].join('\n')); } addLightOrDark(color, 'light', lightShade, tonalOffset); addLightOrDark(color, 'dark', darkShade, tonalOffset); if (!color.contrastText) { color.contrastText = getContrastText(color.main); } return color; } var types = { dark: dark, light: light }; warning_1(types[type], "Material-UI: the palette type `".concat(type, "` is not supported.")) ; var paletteOutput = cjs(_extends({ // A collection of common colors. common: common, // The palette type, can be light or dark. type: type, // The colors used to represent primary interface elements for a user. primary: augmentColor(primary), // The colors used to represent secondary interface elements for a user. secondary: augmentColor(secondary, 'A400', 'A200', 'A700'), // The colors used to represent interface elements that the user should be made aware of. error: augmentColor(error), // The grey colors. grey: grey, // Used by `getContrastText()` to maximize the contrast between the background and // the text. contrastThreshold: contrastThreshold, // Take a background color and return the color of the text to maximize the contrast. getContrastText: getContrastText, // Generate a rich color object. augmentColor: 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: tonalOffset }, types[type]), other, { clone: false // No need to clone deep }); return paletteOutput; } function round(value) { return Math.round(value * 1e5) / 1e5; } var caseAllCaps = { textTransform: 'uppercase' }; var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif'; /** * @see @link{https://material.io/design/typography/the-type-system.html} * @see @link{https://material.io/design/typography/understanding-typography.html} */ function createTypography(palette, typography) { var _ref = typeof typography === 'function' ? typography(palette) : typography, _ref$fontFamily = _ref.fontFamily, fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily, _ref$fontSize = _ref.fontSize, fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize, _ref$fontWeightLight = _ref.fontWeightLight, fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight, _ref$fontWeightRegula = _ref.fontWeightRegular, fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula, _ref$fontWeightMedium = _ref.fontWeightMedium, fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium, _ref$fontWeightBold = _ref.fontWeightBold, fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold, _ref$htmlFontSize = _ref.htmlFontSize, htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize, allVariants = _ref.allVariants, other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants"]); warning_1(typeof fontSize === 'number', "Material-UI: 'fontSize' is required to be a number.") ; warning_1(typeof htmlFontSize === 'number', "Material-UI: 'htmlFontSize' is required to be a number.") ; var coef = fontSize / 14; var pxToRem = function pxToRem(size) { return "".concat(size / htmlFontSize * coef, "rem"); }; var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) { return _extends({ fontFamily: fontFamily, fontWeight: fontWeight, fontSize: pxToRem(size), // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ lineHeight: lineHeight }, fontFamily === defaultFontFamily ? { letterSpacing: "".concat(round(letterSpacing / size), "em") } : {}, {}, casing, {}, allVariants); }; var variants = { h1: buildVariant(fontWeightLight, 96, 1, -1.5), h2: buildVariant(fontWeightLight, 60, 1, -0.5), h3: buildVariant(fontWeightRegular, 48, 1.04, 0), h4: buildVariant(fontWeightRegular, 34, 1.17, 0.25), h5: buildVariant(fontWeightRegular, 24, 1.33, 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) }; return cjs(_extends({ htmlFontSize: htmlFontSize, pxToRem: pxToRem, round: round, fontFamily: fontFamily, fontSize: fontSize, fontWeightLight: fontWeightLight, fontWeightRegular: fontWeightRegular, fontWeightMedium: fontWeightMedium, fontWeightBold: fontWeightBold }, variants), other, { clone: false // No need to clone deep }); } var shadowKeyUmbraOpacity = 0.2; var shadowKeyPenumbraOpacity = 0.14; var shadowAmbientShadowOpacity = 0.12; function createShadow() { return ["".concat(arguments.length <= 0 ? undefined : arguments[0], "px ").concat(arguments.length <= 1 ? undefined : arguments[1], "px ").concat(arguments.length <= 2 ? undefined : arguments[2], "px ").concat(arguments.length <= 3 ? undefined : arguments[3], "px rgba(0,0,0,").concat(shadowKeyUmbraOpacity, ")"), "".concat(arguments.length <= 4 ? undefined : arguments[4], "px ").concat(arguments.length <= 5 ? undefined : arguments[5], "px ").concat(arguments.length <= 6 ? undefined : arguments[6], "px ").concat(arguments.length <= 7 ? undefined : arguments[7], "px rgba(0,0,0,").concat(shadowKeyPenumbraOpacity, ")"), "".concat(arguments.length <= 8 ? undefined : arguments[8], "px ").concat(arguments.length <= 9 ? undefined : arguments[9], "px ").concat(arguments.length <= 10 ? undefined : arguments[10], "px ").concat(arguments.length <= 11 ? undefined : arguments[11], "px rgba(0,0,0,").concat(shadowAmbientShadowOpacity, ")")].join(','); } var shadows = ['none', createShadow(0, 1, 3, 0, 0, 1, 1, 0, 0, 2, 1, -1), createShadow(0, 1, 5, 0, 0, 2, 2, 0, 0, 3, 1, -2), createShadow(0, 1, 8, 0, 0, 3, 4, 0, 0, 3, 3, -2), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)]; var shape = { borderRadius: 4 }; var warnOnce; function createSpacing() { var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8; // Already transformed. if (spacingInput.mui) { return spacingInput; } // All components align to an 8dp square baseline grid for mobile, tablet, and desktop. // https://material.io/design/layout/understanding-layout.html#pixel-density var transform; if (typeof spacingInput === 'function') { transform = spacingInput; } else { warning_1(typeof spacingInput === 'number', ["Material-UI: the `theme.spacing` value (".concat(spacingInput, ") is invalid."), 'It should be a number or a function.'].join('\n')) ; transform = function transform(factor) { warning_1(typeof factor === 'number', "Expected spacing argument to be a number, got ".concat(factor)) ; return spacingInput * factor; }; } var spacing = function spacing() { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } warning_1(args.length <= 4, "Material-UI: Too many arguments provided, expected between 0 and 4, got ".concat(args.length)) ; if (args.length === 0) { return transform(1); } if (args.length === 1) { return transform(args[0]); } return args.map(function (factor) { var output = transform(factor); return typeof output === 'number' ? "".concat(output, "px") : output; }).join(' '); }; // Backward compatibility, to remove in v5. Object.defineProperty(spacing, 'unit', { get: function get() { { warning_1(warnOnce && "development" !== 'test', ['Material-UI: theme.spacing.unit usage has been deprecated.', 'It will be removed in v5.', 'You can replace `theme.spacing.unit * y` with `theme.spacing(y)`.', '', 'You can use the `https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api` migration helper to make the process smoother.'].join('\n')) ; warnOnce = true; } return spacingInput; } }); spacing.mui = true; return spacing; } // to learn the context in which each easing should be used. var 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)' }; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations // to learn when use what timing var 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 }; var formatMs = function formatMs(milliseconds) { return "".concat(Math.round(milliseconds), "ms"); }; var isString = function isString(value) { return typeof value === 'string'; }; var isNumber = function isNumber(value) { return !isNaN(parseFloat(value)); }; /** * @param {string|Array} props * @param {object} param * @param {string} param.prop * @param {number} param.duration * @param {string} param.easing * @param {number} param.delay */ var transitions = { easing: easing, duration: duration, create: function create() { var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['all']; var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var _options$duration = options.duration, durationOption = _options$duration === void 0 ? duration.standard : _options$duration, _options$easing = options.easing, easingOption = _options$easing === void 0 ? easing.easeInOut : _options$easing, _options$delay = options.delay, delay = _options$delay === void 0 ? 0 : _options$delay, other = _objectWithoutProperties(options, ["duration", "easing", "delay"]); warning_1(isString(props) || Array.isArray(props), 'Material-UI: argument "props" must be a string or Array.') ; warning_1(isNumber(durationOption) || isString(durationOption), "Material-UI: argument \"duration\" must be a number or a string but found ".concat(durationOption, ".")) ; warning_1(isString(easingOption), 'Material-UI: argument "easing" must be a string.') ; warning_1(isNumber(delay) || isString(delay), 'Material-UI: argument "delay" must be a number or a string.') ; warning_1(Object.keys(other).length === 0, "Material-UI: unrecognized argument(s) [".concat(Object.keys(other).join(','), "]")) ; return (Array.isArray(props) ? props : [props]).map(function (animatedProp) { return "".concat(animatedProp, " ").concat(typeof durationOption === 'string' ? durationOption : formatMs(durationOption), " ").concat(easingOption, " ").concat(typeof delay === 'string' ? delay : formatMs(delay)); }).join(','); }, getAutoHeightDuration: function getAutoHeightDuration(height) { if (!height) { return 0; } var constant = height / 36; // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10 return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10); } }; // We need to centralize the zIndex definitions as they work // like global values in the browser. var zIndex = { mobileStepper: 1000, appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 }; function createMuiTheme() { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var _options$breakpoints = options.breakpoints, breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints, _options$mixins = options.mixins, mixinsInput = _options$mixins === void 0 ? {} : _options$mixins, _options$palette = options.palette, paletteInput = _options$palette === void 0 ? {} : _options$palette, shadowsInput = options.shadows, spacingInput = options.spacing, _options$typography = options.typography, typographyInput = _options$typography === void 0 ? {} : _options$typography, other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "shadows", "spacing", "typography"]); var palette = createPalette(paletteInput); var breakpoints = createBreakpoints(breakpointsInput); var spacing = createSpacing(spacingInput); var muiTheme = _extends({ breakpoints: breakpoints, direction: 'ltr', mixins: createMixins(breakpoints, spacing, mixinsInput), overrides: {}, // Inject custom styles palette: palette, props: {}, // Inject custom props shadows: shadowsInput || shadows, typography: createTypography(palette, typographyInput), spacing: spacing }, cjs({ shape: shape, transitions: transitions, zIndex: zIndex }, other, { isMergeableObject: isPlainObject })); { var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; var traverse = function traverse(node, parentKey) { var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; var key; // eslint-disable-next-line guard-for-in, no-restricted-syntax for (key in node) { var child = node[key]; if (depth === 1) { if (key.indexOf('Mui') === 0 && child) { traverse(child, key, depth + 1); } } else if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) { warning_1(false, ["Material-UI: the `".concat(parentKey, "` component increases ") + "the CSS specificity of the `".concat(key, "` internal state."), 'You can not override it like this: ', JSON.stringify(node, null, 2), '', 'Instead, you need to use the $ruleName syntax:', JSON.stringify({ root: _defineProperty({}, "&$".concat(key), child) }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n')) ; // Remove the style to prevent global conflicts. node[key] = {}; } } }; traverse(muiTheme.overrides); } warning_1(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') ; return muiTheme; } function chainPropTypes(propType1, propType2) { return function validate() { return propType1.apply(void 0, arguments) || propType2.apply(void 0, arguments); }; } function unwrapExports (x) { return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; } function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var reactIs_production_min = createCommonjsModule(function (module, exports) { Object.defineProperty(exports,"__esModule",{value:!0}); var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.memo"): 60115,r=b?Symbol.for("react.lazy"):60116;function t(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c: