@bluemarble/bm-components 0.0.65 → 0.0.70

package/dist/esm/index.js

@@ -36,6 +36,45 @@ const GridHeader = ({ setOrder, setOrderBy, order, orderBy, titles = [] }) => {
         }))));
 };
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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 isPlainObject(item) {
+  return item !== null && typeof item === 'object' && item.constructor === Object;
+}
+function deepmerge(target, source, options = {
+  clone: true
+}) {
+  const output = options.clone ? _extends({}, target) : target;
+  if (isPlainObject(target) && isPlainObject(source)) {
+    Object.keys(source).forEach(key => {
+      // Avoid prototype pollution
+      if (key === '__proto__') {
+        return;
+      }
+      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
+        output[key] = deepmerge(target[key], source[key], options);
+      } else {
+        output[key] = source[key];
+      }
+    });
+  }
+  return output;
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function commonjsRequire (path) {
@@ -1147,6 +1186,37 @@ if (process.env.NODE_ENV !== 'production') {
 
 var PropTypes = propTypes.exports;
 
+/**
+ * WARNING: Don't import this directly.
+ * Use `MuiError` from `@mui/utils/macros/MuiError.macro` instead.
+ * @param {number} code
+ */
+function formatMuiErrorMessage(code) {
+  // Apply babel-plugin-transform-template-literals in loose mode
+  // loose mode is safe iff we're concatenating primitives
+  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
+  /* eslint-disable prefer-template */
+  let url = 'https://mui.com/production-error/?code=' + code;
+  for (let i = 1; i < arguments.length; i += 1) {
+    // rest params over-transpile for this case
+    // eslint-disable-next-line prefer-rest-params
+    url += '&args[]=' + encodeURIComponent(arguments[i]);
+  }
+  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
+  /* eslint-enable prefer-template */
+}
+
+// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
+//
+// A strict capitalization should uppercase the first letter of each word in the sentence.
+// We only handle the first word.
+function capitalize(string) {
+  if (typeof string !== 'string') {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`capitalize(string)\` expects a string argument.` : formatMuiErrorMessage(7));
+  }
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production_min = {};
@@ -2389,124 +2459,41 @@ if (process.env.NODE_ENV === 'production') {
   jsxRuntime.exports = reactJsxRuntime_development;
 }
 
-/** @license MUI v5.10.8
+/** @license MUI v5.11.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 function styled(tag, options) {
   const stylesFactory = emStyled(tag, options);
-
   if (process.env.NODE_ENV !== 'production') {
     return (...styles) => {
       const component = typeof tag === 'string' ? `"${tag}"` : 'component';
-
       if (styles.length === 0) {
         console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
       } else if (styles.some(style => style === undefined)) {
         console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
       }
-
       return stylesFactory(...styles);
     };
   }
-
   return stylesFactory;
-} // eslint-disable-next-line @typescript-eslint/naming-convention
+}
 
 const responsivePropType = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
 var responsivePropType$1 = responsivePropType;
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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 isPlainObject(item) {
-  return item !== null && typeof item === 'object' && item.constructor === Object;
-}
-function deepmerge(target, source, options = {
-  clone: true
-}) {
-  const output = options.clone ? _extends({}, target) : target;
-
-  if (isPlainObject(target) && isPlainObject(source)) {
-    Object.keys(source).forEach(key => {
-      // Avoid prototype pollution
-      if (key === '__proto__') {
-        return;
-      }
-
-      if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
-        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
-        output[key] = deepmerge(target[key], source[key], options);
-      } else {
-        output[key] = source[key];
-      }
-    });
-  }
-
-  return output;
-}
-
-/**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/utils/macros/MuiError.macro` instead.
- * @param {number} code
- */
-function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe iff we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
-}
-
-// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
-//
-// A strict capitalization should uppercase the first letter of each word in the sentence.
-// We only handle the first word.
-function capitalize(string) {
-  if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`capitalize(string)\` expects a string argument.` : formatMuiErrorMessage(7));
-  }
-
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-
   return deepmerge(acc, item, {
     clone: false // No need to clone deep, it's way faster.
-
   });
 }
 
+// The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
-
 const values = {
   xs: 0,
   // phone
@@ -2517,8 +2504,8 @@ const values = {
   lg: 1200,
   // desktop
   xl: 1536 // large screen
-
 };
+
 const defaultBreakpoints = {
   // Sorted ASC by size. That's important.
   // It can't be configured as it's used statically for propTypes.
@@ -2527,7 +2514,6 @@ const defaultBreakpoints = {
 };
 function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
-
   if (Array.isArray(propValue)) {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return propValue.reduce((acc, item, index) => {
@@ -2535,7 +2521,6 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
       return acc;
     }, {});
   }
-
   if (typeof propValue === 'object') {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
@@ -2547,18 +2532,14 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
         const cssKey = breakpoint;
         acc[cssKey] = propValue[cssKey];
       }
-
       return acc;
     }, {});
   }
-
   const output = styleFromPropValue(propValue);
   return output;
 }
-
 function createEmptyBreakpointObject(breakpointsInput = {}) {
   var _breakpointsInput$key;
-
   const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
     acc[breakpointStyleKey] = {};
@@ -2570,11 +2551,9 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
   return breakpointKeys.reduce((acc, key) => {
     const breakpointOutput = acc[key];
     const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-
     if (isBreakpointUnused) {
       delete acc[key];
     }
-
     return acc;
   }, style);
 }
@@ -2582,29 +2561,24 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
 function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
-  } // Check if CSS variables are used
-
+  }
 
+  // Check if CSS variables are used
   if (obj && obj.vars && checkVars) {
     const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
-
     if (val != null) {
       return val;
     }
   }
-
   return path.split('.').reduce((acc, item) => {
     if (acc && acc[item] != null) {
       return acc[item];
     }
-
     return null;
   }, obj);
 }
-
-function getValue$1(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
-
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
   } else if (Array.isArray(themeMapping)) {
@@ -2612,14 +2586,11 @@ function getValue$1(themeMapping, transform, propValueFinal, userValue = propVal
   } else {
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
-
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
-
   return value;
 }
-
 function style$1(options) {
   const {
     prop,
@@ -2628,35 +2599,30 @@ function style$1(options) {
     transform
   } = options;
 
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     if (props[prop] == null) {
       return null;
     }
-
     const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
-
     const styleFromPropValue = propValueFinal => {
-      let value = getValue$1(themeMapping, transform, propValueFinal);
-
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
-
       if (cssProperty === false) {
         return value;
       }
-
       return {
         [cssProperty]: value
       };
     };
-
     return handleBreakpoints(props, propValue, styleFromPropValue);
   };
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? {
     [prop]: responsivePropType$1
   } : {};
@@ -2672,16 +2638,16 @@ function compose(...styles) {
     return acc;
   }, {});
 
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {
         return merge(acc, handlers[prop](props));
       }
-
       return acc;
     }, {});
   };
-
   fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce((acc, style) => Object.assign(acc, style.propTypes), {}) : {};
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
   return fn;
@@ -2693,7 +2659,6 @@ function memoize(fn) {
     if (cache[arg] === undefined) {
       cache[arg] = fn(arg);
     }
-
     return cache[arg];
   };
 }
@@ -2715,10 +2680,11 @@ const aliases = {
   marginY: 'my',
   paddingX: 'px',
   paddingY: 'py'
-}; // memoize() impact:
+};
+
+// memoize() impact:
 // From 300,000 ops/sec
 // To 350,000 ops/sec
-
 const getCssProperties = memoize(prop => {
   // It's not a shorthand notation.
   if (prop.length > 2) {
@@ -2728,7 +2694,6 @@ const getCssProperties = memoize(prop => {
       return [prop];
     }
   }
-
   const [a, b] = prop.split('');
   const property = properties[a];
   const direction = directions[b] || '';
@@ -2739,31 +2704,25 @@ const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddin
 const spacingKeys = [...marginKeys, ...paddingKeys];
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   var _getPath;
-
   const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
-
   if (typeof themeSpacing === 'number') {
     return abs => {
       if (typeof abs === 'string') {
         return abs;
       }
-
       if (process.env.NODE_ENV !== 'production') {
         if (typeof abs !== 'number') {
           console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
         }
       }
-
       return themeSpacing * abs;
     };
   }
-
   if (Array.isArray(themeSpacing)) {
     return abs => {
       if (typeof abs === 'string') {
         return abs;
       }
-
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
           console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
@@ -2771,19 +2730,15 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
           console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
         }
       }
-
       return themeSpacing[abs];
     };
   }
-
   if (typeof themeSpacing === 'function') {
     return themeSpacing;
   }
-
   if (process.env.NODE_ENV !== 'production') {
     console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
   }
-
   return () => undefined;
 }
 function createUnarySpacing(theme) {
@@ -2793,18 +2748,14 @@ function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-
   const abs = Math.abs(propValue);
   const transformed = transformer(abs);
-
   if (propValue >= 0) {
     return transformed;
   }
-
   if (typeof transformed === 'number') {
     return -transformed;
   }
-
   return `-${transformed}`;
 }
 function getStyleFromPropValue(cssProperties, transformer) {
@@ -2813,75 +2764,72 @@ function getStyleFromPropValue(cssProperties, transformer) {
     return acc;
   }, {});
 }
-
 function resolveCssProperty(props, keys, prop, transformer) {
   // Using a hash computation over an array iteration could be faster, but with only 28 items,
   // it's doesn't worth the bundle size.
   if (keys.indexOf(prop) === -1) {
     return null;
   }
-
   const cssProperties = getCssProperties(prop);
   const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
   const propValue = props[prop];
   return handleBreakpoints(props, propValue, styleFromPropValue);
 }
-
 function style(props, keys) {
   const transformer = createUnarySpacing(props.theme);
   return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
-process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
+function margin(props) {
+  return style(props, marginKeys);
+}
+margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
+margin.filterProps = marginKeys;
+function padding(props) {
+  return style(props, paddingKeys);
+}
+padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-
-function spacing(props) {
-  return style(props, spacingKeys);
-}
-
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+padding.filterProps = paddingKeys;
+process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType$1;
   return obj;
 }, {}) : {};
-spacing.filterProps = spacingKeys;
 
-function getBorder(value) {
+function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
   }
-
   return `${value}px solid`;
 }
-
 const border = style$1({
   prop: 'border',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderTop = style$1({
   prop: 'borderTop',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderRight = style$1({
   prop: 'borderRight',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderBottom = style$1({
   prop: 'borderBottom',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderLeft = style$1({
   prop: 'borderLeft',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 const borderColor = style$1({
   prop: 'borderColor',
@@ -2903,139 +2851,69 @@ const borderLeftColor = style$1({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
-
     const styleFromPropValue = propValue => ({
       borderRadius: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
   }
-
   return null;
 };
 borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: responsivePropType$1
 } : {};
 borderRadius.filterProps = ['borderRadius'];
-const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
-var borders$1 = borders;
-
-const displayPrint = style$1({
-  prop: 'displayPrint',
-  cssProperty: false,
-  transform: value => ({
-    '@media print': {
-      display: value
-    }
-  })
-});
-const displayRaw = style$1({
-  prop: 'display'
-});
-const overflow = style$1({
-  prop: 'overflow'
-});
-const textOverflow = style$1({
-  prop: 'textOverflow'
-});
-const visibility = style$1({
-  prop: 'visibility'
-});
-const whiteSpace = style$1({
-  prop: 'whiteSpace'
-});
-var display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
-
-const flexBasis = style$1({
-  prop: 'flexBasis'
-});
-const flexDirection = style$1({
-  prop: 'flexDirection'
-});
-const flexWrap = style$1({
-  prop: 'flexWrap'
-});
-const justifyContent = style$1({
-  prop: 'justifyContent'
-});
-const alignItems = style$1({
-  prop: 'alignItems'
-});
-const alignContent = style$1({
-  prop: 'alignContent'
-});
-const order = style$1({
-  prop: 'order'
-});
-const flex = style$1({
-  prop: 'flex'
-});
-const flexGrow = style$1({
-  prop: 'flexGrow'
-});
-const flexShrink = style$1({
-  prop: 'flexShrink'
-});
-const alignSelf = style$1({
-  prop: 'alignSelf'
-});
-const justifyItems = style$1({
-  prop: 'justifyItems'
-});
-const justifySelf = style$1({
-  prop: 'justifySelf'
-});
-const flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-var flexbox$1 = flexbox;
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
 
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
-
     const styleFromPropValue = propValue => ({
       gap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.gap, styleFromPropValue);
   }
-
   return null;
 };
 gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: responsivePropType$1
 } : {};
 gap.filterProps = ['gap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
-
     const styleFromPropValue = propValue => ({
       columnGap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.columnGap, styleFromPropValue);
   }
-
   return null;
 };
 columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: responsivePropType$1
 } : {};
 columnGap.filterProps = ['columnGap'];
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
-
     const styleFromPropValue = propValue => ({
       rowGap: getValue(transformer, propValue)
     });
-
     return handleBreakpoints(props, props.rowGap, styleFromPropValue);
   }
-
   return null;
 };
 rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
@@ -3069,264 +2947,457 @@ const gridTemplateAreas = style$1({
 const gridArea = style$1({
   prop: 'gridArea'
 });
-const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-var grid$1 = grid;
+compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
 
-function transform$1(value, userValue) {
+function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
-
   return value;
 }
-
 const color = style$1({
   prop: 'color',
   themeKey: 'palette',
-  transform: transform$1
+  transform: paletteTransform
 });
 const bgcolor = style$1({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
-  transform: transform$1
+  transform: paletteTransform
 });
 const backgroundColor = style$1({
   prop: 'backgroundColor',
   themeKey: 'palette',
-  transform: transform$1
-});
-const palette = compose(color, bgcolor, backgroundColor);
-var palette$1 = palette;
-
-const position = style$1({
-  prop: 'position'
-});
-const zIndex = style$1({
-  prop: 'zIndex',
-  themeKey: 'zIndex'
-});
-const top = style$1({
-  prop: 'top'
-});
-const right = style$1({
-  prop: 'right'
-});
-const bottom = style$1({
-  prop: 'bottom'
-});
-const left = style$1({
-  prop: 'left'
-});
-var positions = compose(position, zIndex, top, right, bottom, left);
-
-const boxShadow = style$1({
-  prop: 'boxShadow',
-  themeKey: 'shadows'
+  transform: paletteTransform
 });
-var shadows = boxShadow;
+compose(color, bgcolor, backgroundColor);
 
-function transform(value) {
+function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
-
 const width = style$1({
   prop: 'width',
-  transform
+  transform: sizingTransform
 });
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
       var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-
       const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values[propValue];
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
     };
-
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
   }
-
   return null;
 };
 maxWidth.filterProps = ['maxWidth'];
 const minWidth = style$1({
   prop: 'minWidth',
-  transform
+  transform: sizingTransform
 });
 const height = style$1({
   prop: 'height',
-  transform
+  transform: sizingTransform
 });
 const maxHeight = style$1({
   prop: 'maxHeight',
-  transform
+  transform: sizingTransform
 });
 const minHeight = style$1({
   prop: 'minHeight',
-  transform
+  transform: sizingTransform
 });
 style$1({
   prop: 'size',
   cssProperty: 'width',
-  transform
+  transform: sizingTransform
 });
 style$1({
   prop: 'size',
   cssProperty: 'height',
-  transform
+  transform: sizingTransform
 });
 const boxSizing = style$1({
   prop: 'boxSizing'
 });
-const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
-var sizing$1 = sizing;
+compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
 
-const fontFamily = style$1({
-  prop: 'fontFamily',
-  themeKey: 'typography'
-});
-const fontSize = style$1({
-  prop: 'fontSize',
-  themeKey: 'typography'
-});
-const fontStyle = style$1({
-  prop: 'fontStyle',
-  themeKey: 'typography'
-});
-const fontWeight = style$1({
-  prop: 'fontWeight',
-  themeKey: 'typography'
-});
-const letterSpacing = style$1({
-  prop: 'letterSpacing'
-});
-const textTransform = style$1({
-  prop: 'textTransform'
-});
-const lineHeight = style$1({
-  prop: 'lineHeight'
-});
-const textAlign = style$1({
-  prop: 'textAlign'
-});
-const typographyVariant = style$1({
-  prop: 'typography',
-  cssProperty: false,
-  themeKey: 'typography'
-});
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
-var typography$1 = typography;
-
-const filterPropsMapping = {
-  borders: borders$1.filterProps,
-  display: display.filterProps,
-  flexbox: flexbox$1.filterProps,
-  grid: grid$1.filterProps,
-  positions: positions.filterProps,
-  palette: palette$1.filterProps,
-  shadows: shadows.filterProps,
-  sizing: sizing$1.filterProps,
-  spacing: spacing.filterProps,
-  typography: typography$1.filterProps
-};
-const styleFunctionMapping = {
-  borders: borders$1,
-  display,
-  flexbox: flexbox$1,
-  grid: grid$1,
-  positions,
-  palette: palette$1,
-  shadows,
-  sizing: sizing$1,
-  spacing,
-  typography: typography$1
+const defaultSxConfig = {
+  // borders
+  border: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderTop: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderRight: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderBottom: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderLeft: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  borderColor: {
+    themeKey: 'palette'
+  },
+  borderTopColor: {
+    themeKey: 'palette'
+  },
+  borderRightColor: {
+    themeKey: 'palette'
+  },
+  borderBottomColor: {
+    themeKey: 'palette'
+  },
+  borderLeftColor: {
+    themeKey: 'palette'
+  },
+  borderRadius: {
+    themeKey: 'shape.borderRadius',
+    style: borderRadius
+  },
+  // palette
+  color: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  bgcolor: {
+    themeKey: 'palette',
+    cssProperty: 'backgroundColor',
+    transform: paletteTransform
+  },
+  backgroundColor: {
+    themeKey: 'palette',
+    transform: paletteTransform
+  },
+  // spacing
+  p: {
+    style: padding
+  },
+  pt: {
+    style: padding
+  },
+  pr: {
+    style: padding
+  },
+  pb: {
+    style: padding
+  },
+  pl: {
+    style: padding
+  },
+  px: {
+    style: padding
+  },
+  py: {
+    style: padding
+  },
+  padding: {
+    style: padding
+  },
+  paddingTop: {
+    style: padding
+  },
+  paddingRight: {
+    style: padding
+  },
+  paddingBottom: {
+    style: padding
+  },
+  paddingLeft: {
+    style: padding
+  },
+  paddingX: {
+    style: padding
+  },
+  paddingY: {
+    style: padding
+  },
+  paddingInline: {
+    style: padding
+  },
+  paddingInlineStart: {
+    style: padding
+  },
+  paddingInlineEnd: {
+    style: padding
+  },
+  paddingBlock: {
+    style: padding
+  },
+  paddingBlockStart: {
+    style: padding
+  },
+  paddingBlockEnd: {
+    style: padding
+  },
+  m: {
+    style: margin
+  },
+  mt: {
+    style: margin
+  },
+  mr: {
+    style: margin
+  },
+  mb: {
+    style: margin
+  },
+  ml: {
+    style: margin
+  },
+  mx: {
+    style: margin
+  },
+  my: {
+    style: margin
+  },
+  margin: {
+    style: margin
+  },
+  marginTop: {
+    style: margin
+  },
+  marginRight: {
+    style: margin
+  },
+  marginBottom: {
+    style: margin
+  },
+  marginLeft: {
+    style: margin
+  },
+  marginX: {
+    style: margin
+  },
+  marginY: {
+    style: margin
+  },
+  marginInline: {
+    style: margin
+  },
+  marginInlineStart: {
+    style: margin
+  },
+  marginInlineEnd: {
+    style: margin
+  },
+  marginBlock: {
+    style: margin
+  },
+  marginBlockStart: {
+    style: margin
+  },
+  marginBlockEnd: {
+    style: margin
+  },
+  // display
+  displayPrint: {
+    cssProperty: false,
+    transform: value => ({
+      '@media print': {
+        display: value
+      }
+    })
+  },
+  display: {},
+  overflow: {},
+  textOverflow: {},
+  visibility: {},
+  whiteSpace: {},
+  // flexbox
+  flexBasis: {},
+  flexDirection: {},
+  flexWrap: {},
+  justifyContent: {},
+  alignItems: {},
+  alignContent: {},
+  order: {},
+  flex: {},
+  flexGrow: {},
+  flexShrink: {},
+  alignSelf: {},
+  justifyItems: {},
+  justifySelf: {},
+  // grid
+  gap: {
+    style: gap
+  },
+  rowGap: {
+    style: rowGap
+  },
+  columnGap: {
+    style: columnGap
+  },
+  gridColumn: {},
+  gridRow: {},
+  gridAutoFlow: {},
+  gridAutoColumns: {},
+  gridAutoRows: {},
+  gridTemplateColumns: {},
+  gridTemplateRows: {},
+  gridTemplateAreas: {},
+  gridArea: {},
+  // positions
+  position: {},
+  zIndex: {
+    themeKey: 'zIndex'
+  },
+  top: {},
+  right: {},
+  bottom: {},
+  left: {},
+  // shadows
+  boxShadow: {
+    themeKey: 'shadows'
+  },
+  // sizing
+  width: {
+    transform: sizingTransform
+  },
+  maxWidth: {
+    style: maxWidth
+  },
+  minWidth: {
+    transform: sizingTransform
+  },
+  height: {
+    transform: sizingTransform
+  },
+  maxHeight: {
+    transform: sizingTransform
+  },
+  minHeight: {
+    transform: sizingTransform
+  },
+  boxSizing: {},
+  // typography
+  fontFamily: {
+    themeKey: 'typography'
+  },
+  fontSize: {
+    themeKey: 'typography'
+  },
+  fontStyle: {
+    themeKey: 'typography'
+  },
+  fontWeight: {
+    themeKey: 'typography'
+  },
+  letterSpacing: {},
+  textTransform: {},
+  lineHeight: {},
+  textAlign: {},
+  typography: {
+    cssProperty: false,
+    themeKey: 'typography'
+  }
 };
-const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
-  filterPropsMapping[styleFnName].forEach(propName => {
-    acc[propName] = styleFunctionMapping[styleFnName];
-  });
-  return acc;
-}, {});
+var defaultSxConfig$1 = defaultSxConfig;
 
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
   return objects.every(object => union.size === Object.keys(object).length);
 }
-
 function callIfFn(maybeFn, arg) {
   return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-} // eslint-disable-next-line @typescript-eslint/naming-convention
-
-
-function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMapping) {
-  const propToStyleFunction = Object.keys(styleFunctionMapping$1).reduce((acc, styleFnName) => {
-    styleFunctionMapping$1[styleFnName].filterProps.forEach(propName => {
-      acc[propName] = styleFunctionMapping$1[styleFnName];
-    });
-    return acc;
-  }, {});
+}
 
-  function getThemeValue(prop, value, theme) {
-    const inputProps = {
-      [prop]: value,
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function unstable_createStyleFunctionSx() {
+  function getThemeValue(prop, val, theme, config) {
+    const props = {
+      [prop]: val,
       theme
     };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
+    const options = config[prop];
+    if (!options) {
+      return {
+        [prop]: val
+      };
+    }
+    const {
+      cssProperty = prop,
+      themeKey,
+      transform,
+      style
+    } = options;
+    if (val == null) {
+      return null;
+    }
+    const themeMapping = getPath(theme, themeKey) || {};
+    if (style) {
+      return style(props);
+    }
+    const styleFromPropValue = propValueFinal => {
+      let value = getStyleValue(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
+      }
+      if (cssProperty === false) {
+        return value;
+      }
+      return {
+        [cssProperty]: value
+      };
     };
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
-
   function styleFunctionSx(props) {
+    var _theme$unstable_sxCon;
     const {
       sx,
       theme = {}
     } = props || {};
-
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
+
+    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
+
     /*
      * Receive `sxInput` as object or callback
      * and then recursively check keys & values to create media query object styles.
      * (the result will be used in `styled`)
      */
-
-
     function traverse(sxInput) {
       let sxObject = sxInput;
-
       if (typeof sxInput === 'function') {
         sxObject = sxInput(theme);
       } else if (typeof sxInput !== 'object') {
         // value
         return sxInput;
       }
-
       if (!sxObject) {
         return null;
       }
-
       const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css = emptyBreakpoints;
       Object.keys(sxObject).forEach(styleKey => {
         const value = callIfFn(sxObject[styleKey], theme);
-
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
+            if (config[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
               const breakpointsValues = handleBreakpoints({
                 theme
               }, value, x => ({
                 [styleKey]: x
               }));
-
               if (objectsHaveSameKeys(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx({
                   sx: value,
@@ -3337,21 +3408,19 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
       return removeUnusedBreakpoints(breakpointsKeys, css);
     }
-
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
-
   return styleFunctionSx;
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var defaultStyleFunctionSx = styleFunctionSx;
+var styleFunctionSx$1 = styleFunctionSx;
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
@@ -3367,14 +3436,15 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
 }
 
 const _excluded$9 = ["sx"];
-
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
   Object.keys(props).forEach(prop => {
-    if (propToStyleFunction[prop]) {
+    if (config[prop]) {
       result.systemProps[prop] = props[prop];
     } else {
       result.otherProps[prop] = props[prop];
@@ -3382,35 +3452,29 @@ const splitProps = props => {
   });
   return result;
 };
-
 function extendSxProp(props) {
   const {
-    sx: inSx
-  } = props,
-        other = _objectWithoutPropertiesLoose$2(props, _excluded$9);
-
+      sx: inSx
+    } = props,
+    other = _objectWithoutPropertiesLoose$2(props, _excluded$9);
   const {
     systemProps,
     otherProps
   } = splitProps(other);
   let finalSx;
-
   if (Array.isArray(inSx)) {
     finalSx = [systemProps, ...inSx];
   } else if (typeof inSx === 'function') {
     finalSx = (...args) => {
       const result = inSx(...args);
-
       if (!isPlainObject(result)) {
         return systemProps;
       }
-
       return _extends({}, systemProps, result);
     };
   } else {
     finalSx = _extends({}, systemProps, inSx);
   }
-
   return _extends({}, otherProps, {
     sx: finalSx
   });
@@ -3419,84 +3483,72 @@ function extendSxProp(props) {
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const _excluded$8 = ["values", "unit", "step"];
-
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
-  })) || []; // Sort in ascending order
-
+  })) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
     return _extends({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
-}; // Keep in mind that @media is inclusive by the CSS specification.
-
+};
 
+// Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values = {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536 // large screen
-
-    },
-    unit = 'px',
-    step = 5
-  } = breakpoints,
-        other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$8);
+      // The breakpoint **start** at this value.
+      // For instance with the first breakpoint xs: [xs, sm).
+      values = {
+        xs: 0,
+        // phone
+        sm: 600,
+        // tablet
+        md: 900,
+        // small laptop
+        lg: 1200,
+        // desktop
+        xl: 1536 // large screen
+      },
 
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = _objectWithoutPropertiesLoose$2(breakpoints, _excluded$8);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
-
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (min-width:${value}${unit})`;
   }
-
   function down(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `@media (max-width:${value - step / 100}${unit})`;
   }
-
   function between(start, end) {
     const endIndex = keys.indexOf(end);
     return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
   }
-
   function only(key) {
     if (keys.indexOf(key) + 1 < keys.length) {
       return between(key, keys[keys.indexOf(key) + 1]);
     }
-
     return up(key);
   }
-
   function not(key) {
     // handle first and last key separately, for better readability
     const keyIndex = keys.indexOf(key);
-
     if (keyIndex === 0) {
       return up(keys[1]);
     }
-
     if (keyIndex === keys.length - 1) {
       return down(keys[keyIndex]);
     }
-
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-
   return _extends({
     keys,
     values: sortedValues,
@@ -3515,48 +3567,44 @@ const shape = {
 var shape$1 = shape;
 
 /* tslint:enable:unified-signatures */
+
 function createSpacing(spacingInput = 8) {
   // Already transformed.
   if (spacingInput.mui) {
     return spacingInput;
-  } // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
+  }
+
+  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
   // Smaller components, such as icons, can align to a 4dp grid.
   // https://m2.material.io/design/layout/understanding-layout.html
-
-
   const transform = createUnarySpacing({
     spacing: spacingInput
   });
-
   const spacing = (...argsInput) => {
     if (process.env.NODE_ENV !== 'production') {
       if (!(argsInput.length <= 4)) {
         console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
       }
     }
-
     const args = argsInput.length === 0 ? [1] : argsInput;
     return args.map(argument => {
       const output = transform(argument);
       return typeof output === 'number' ? `${output}px` : output;
     }).join(' ');
   };
-
   spacing.mui = true;
   return spacing;
 }
 
 const _excluded$7 = ["breakpoints", "palette", "spacing", "shape"];
-
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {}
-  } = options,
-        other = _objectWithoutPropertiesLoose$2(options, _excluded$7);
-
+      breakpoints: breakpointsInput = {},
+      palette: paletteInput = {},
+      spacing: spacingInput,
+      shape: shapeInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose$2(options, _excluded$7);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -3571,39 +3619,40 @@ function createTheme(options = {}, ...args) {
     shape: _extends({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx$1({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 
 const ThemeContext = /*#__PURE__*/React.createContext(null);
-
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'ThemeContext';
 }
-
 var ThemeContext$1 = ThemeContext;
 
 function useTheme$2() {
   const theme = React.useContext(ThemeContext$1);
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
-
   return theme;
 }
 
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-
 function useTheme$1(defaultTheme = null) {
   const contextTheme = useTheme$2();
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 
 const systemDefaultTheme = createTheme();
-
 function useTheme(defaultTheme = systemDefaultTheme) {
   return useTheme$1(defaultTheme);
 }
@@ -3613,22 +3662,19 @@ function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = defaultStyleFunctionSx
+    generateClassName
   } = options;
   const BoxRoot = styled('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
+  })(styleFunctionSx$1);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-
     const _extendSxProp = extendSxProp(inProps),
-          {
-      className,
-      component = 'div'
-    } = _extendSxProp,
-          other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$6);
-
+      {
+        className,
+        component = 'div'
+      } = _extendSxProp,
+      other = _objectWithoutPropertiesLoose$2(_extendSxProp, _excluded$6);
     return /*#__PURE__*/jsxRuntime.exports.jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -3640,25 +3686,20 @@ function createBox(options = {}) {
 }
 
 const Box = createBox();
-process.env.NODE_ENV !== "production" ? Box.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * @ignore
    */
   children: PropTypes.node,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -3802,7 +3843,7 @@ function getPropertyValue(obj, property) {
     return String(property.split('.').reduce((o, k) => o && o[k], obj));
 }
 
-/******************************************************************************
+/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -3837,7 +3878,9 @@ const Td = memo(CustomTableCell);
 
 const CustomTableRow = (props) => {
     const { children, sx, striped = true, bordered = undefined } = props, rest = __rest(props, ["children", "sx", "striped", "bordered"]);
-    return (React__default.createElement(TableRow, Object.assign({ sx: Object.assign({ '&:nth-of-type(even)': { bgcolor: striped ? 'action.selected' : '' } }, sx) }, rest), children));
+    return (React__default.createElement(TableRow, Object.assign({ sx: Object.assign({ '&:nth-of-type(even)': { bgcolor: striped ? 'action.selected' : '' } }, sx) }, rest), React__default.Children.map(children, (child) => React__default.cloneElement(child, {
+        bordered
+    }))));
 };
 const Tr = memo(CustomTableRow);
 
@@ -14790,6 +14833,7 @@ function FormikInputMask(_a) {
     var { mask, defaultValue, name } = _a, rest = __rest(_a, ["mask", "defaultValue", "name"]);
     const { ref, value, unmaskedValue, setValue } = useIMask(mask);
     const initialValue = useRef();
+    const formikSaveFunction = useRef();
     useEffect(() => {
         if (!value && defaultValue)
             setValue(String(defaultValue));
@@ -14797,10 +14841,15 @@ function FormikInputMask(_a) {
             setValue(String(initialValue.current));
         }
     }, [defaultValue]);
+    useEffect(() => {
+        if (formikSaveFunction.current)
+            formikSaveFunction.current(name, value);
+    }, [value]);
     return (React__default.createElement(Field, { name: name }, (_a) => {
         var _b = _a.field, { value } = _b, field = __rest(_b, ["value"]), { form: { setFieldValue } } = _a;
         initialValue.current = value;
-        return (React__default.createElement(BaseInput$1, Object.assign({}, rest, field, { onKeyDown: () => setFieldValue(name, unmaskedValue), inputRef: ref })));
+        formikSaveFunction.current = setFieldValue;
+        return React__default.createElement(BaseInput$1, Object.assign({}, rest, field, { inputRef: ref }));
     }));
 }
 
@@ -14988,13 +15037,13 @@ function BaseGrid({ columns, children, fixedColumns, paperProps, tableBodyProps,
                 py: dense ? 0.23 : 0.7,
                 border: bordered ? '1px solid' : '',
                 borderColor: 'divider'
-            }, 'tbody tr:nth-of-type(even)': {
+            }, 'tr:nth-of-type(even)': {
                 transition: 'background-color ease 200ms',
                 bgcolor: striped ? 'divider' : 'initial'
             }, width: fixedColumns ? 'fit-content' : '100' }, paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx) }),
         React__default.createElement(Table, Object.assign({ size: "small", stickyHeader: true }, tableProps, { sx: Object.assign({}, tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) }),
             React__default.createElement(TableHead, Object.assign({}, tableHeadProps),
-                React__default.createElement(TableRow, null, columns.map((column) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? 'none' : 'normal', sx: Object.assign({ pl: 2, fontWeight: 'bold' }, column === null || column === void 0 ? void 0 : column.sx) },
+                React__default.createElement(TableRow, null, columns.map((column) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? 'none' : 'normal', sx: Object.assign({ pl: 2 }, column === null || column === void 0 ? void 0 : column.sx) },
                     React__default.createElement(TableSortLabel, { active: sortedBy === column.name, direction: sortedDirection, onClick: () => onSortBy(column.name), disabled: column.canSort === false, sx: { position: 'relative', right: '-9px' } }, column.label)))))),
             React__default.createElement(TableBody, Object.assign({}, tableBodyProps), children)),
         React__default.createElement(GridPagination, { rowsPerPageOptions: rowsPerPageOptions, currentPage: currentPage, totalNumberOfPages: totalNumberOfPages, onPageChange: onPageChange, setRowsPerPage: setRowsPerPage, rowsPerPage: rowsPerPage, dense: dense })));
@@ -15218,125 +15267,5 @@ const Dialog = (_a) => {
             })))));
 };
 
-(function (module, exports) {
-(function (global, factory) {
-   typeof commonjsRequire === 'function' ? factory(moment$1.exports) :
-   factory(global.moment);
-}(commonjsGlobal, (function (moment) {
-    //! moment.js locale configuration
-
-    var ptBr = moment.defineLocale('pt-br', {
-        months: 'janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro'.split(
-            '_'
-        ),
-        monthsShort: 'jan_fev_mar_abr_mai_jun_jul_ago_set_out_nov_dez'.split('_'),
-        weekdays:
-            'domingo_segunda-feira_terça-feira_quarta-feira_quinta-feira_sexta-feira_sábado'.split(
-                '_'
-            ),
-        weekdaysShort: 'dom_seg_ter_qua_qui_sex_sáb'.split('_'),
-        weekdaysMin: 'do_2ª_3ª_4ª_5ª_6ª_sá'.split('_'),
-        weekdaysParseExact: true,
-        longDateFormat: {
-            LT: 'HH:mm',
-            LTS: 'HH:mm:ss',
-            L: 'DD/MM/YYYY',
-            LL: 'D [de] MMMM [de] YYYY',
-            LLL: 'D [de] MMMM [de] YYYY [às] HH:mm',
-            LLLL: 'dddd, D [de] MMMM [de] YYYY [às] HH:mm',
-        },
-        calendar: {
-            sameDay: '[Hoje às] LT',
-            nextDay: '[Amanhã às] LT',
-            nextWeek: 'dddd [às] LT',
-            lastDay: '[Ontem às] LT',
-            lastWeek: function () {
-                return this.day() === 0 || this.day() === 6
-                    ? '[Último] dddd [às] LT' // Saturday + Sunday
-                    : '[Última] dddd [às] LT'; // Monday - Friday
-            },
-            sameElse: 'L',
-        },
-        relativeTime: {
-            future: 'em %s',
-            past: 'há %s',
-            s: 'poucos segundos',
-            ss: '%d segundos',
-            m: 'um minuto',
-            mm: '%d minutos',
-            h: 'uma hora',
-            hh: '%d horas',
-            d: 'um dia',
-            dd: '%d dias',
-            M: 'um mês',
-            MM: '%d meses',
-            y: 'um ano',
-            yy: '%d anos',
-        },
-        dayOfMonthOrdinalParse: /\d{1,2}º/,
-        ordinal: '%dº',
-        invalidDate: 'Data inválida',
-    });
-
-    return ptBr;
-
-})));
-}());
-
-moment.locale('pt-br');
-function DateFormat(date) {
-    const data = {
-        utc: -3
-    };
-    if (date) {
-        date = moment(date)
-            .add(data.utc + 3, 'hours')
-            .toDate();
-    }
-    function momentWithDate(utc = false) {
-        const current = moment(date).utc(utc);
-        current.toDateOrUndefined = () => !date ? undefined : moment(date).utc(utc).toDate();
-        return current;
-    }
-    function convertDateFromClient(forceUTC = undefined) {
-        let utc = forceUTC || true;
-        if (String(date).endsWith('Z'))
-            utc = false;
-        return momentWithDate(utc);
-    }
-    function now() {
-        if (process.env.NODE_ENV === 'development') {
-            return moment()
-                .add(data.utc + 3, 'hours')
-                .utc(true);
-        }
-        return moment().add(data.utc, 'hours');
-    }
-    const methods = {
-        from: {
-            db: momentWithDate(),
-            client: convertDateFromClient()
-        },
-        now,
-        utc: (newUTC) => {
-            data.utc = newUTC;
-            return (newDate) => {
-                date = newDate;
-                return methods;
-            };
-        }
-    };
-    return methods;
-}
-
-function RouteHelper(methods, middlewares = []) {
-    return (req, res) => {
-        const handler = methods[req.method];
-        if (!handler)
-            return res.status(405).json({ error: 'Método inválido' });
-        return middlewares.reduce((func, middleware) => middleware(func), handler)(req, res);
-    };
-}
-
-export { Autocomplete, BaseGrid, Checkbox, DateFormat, Dialog, EditableTableCell, GetInputLabel, Grid, Input, InputMask, LargeButton, Modal, Radio, RouteHelper, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid, useLoading };
+export { Autocomplete, BaseGrid, Checkbox, Dialog, EditableTableCell, GetInputLabel, Grid, Input, InputMask, LargeButton, Modal, Radio, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid, useLoading };
 //# sourceMappingURL=index.js.map