@groupeactual/ui-kit 0.4.0 → 0.4.2

package/dist/cjs/index.js

@@ -528,7 +528,7 @@ function combine (array, callback) {
 var line = 1;
 var column = 1;
 var length = 0;
-var position$1 = 0;
+var position = 0;
 var character = 0;
 var characters = '';
 
@@ -565,7 +565,7 @@ function char () {
  * @return {number}
  */
 function prev () {
-	character = position$1 > 0 ? charat(characters, --position$1) : 0;
+	character = position > 0 ? charat(characters, --position) : 0;
 
 	if (column--, character === 10)
 		column = 1, line--;
@@ -577,7 +577,7 @@ function prev () {
  * @return {number}
  */
 function next () {
-	character = position$1 < length ? charat(characters, position$1++) : 0;
+	character = position < length ? charat(characters, position++) : 0;
 
 	if (column++, character === 10)
 		column = 1, line++;
@@ -589,14 +589,14 @@ function next () {
  * @return {number}
  */
 function peek () {
-	return charat(characters, position$1)
+	return charat(characters, position)
 }
 
 /**
  * @return {number}
  */
 function caret () {
-	return position$1
+	return position
 }
 
 /**
@@ -641,7 +641,7 @@ function token (type) {
  * @return {any[]}
  */
 function alloc (value) {
-	return line = column = 1, length = strlen(characters = value), position$1 = 0, []
+	return line = column = 1, length = strlen(characters = value), position = 0, []
 }
 
 /**
@@ -657,7 +657,7 @@ function dealloc (value) {
  * @return {string}
  */
 function delimit (type) {
-	return trim(slice(position$1 - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
+	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
 }
 
 /**
@@ -697,7 +697,7 @@ function delimiter (type) {
 		switch (character) {
 			// ] ) " '
 			case type:
-				return position$1
+				return position
 			// " '
 			case 34: case 39:
 				if (type !== 34 && type !== 39)
@@ -714,7 +714,7 @@ function delimiter (type) {
 				break
 		}
 
-	return position$1
+	return position
 }
 
 /**
@@ -731,7 +731,7 @@ function commenter (type, index) {
 		else if (type + character === 42 + 42 && peek() === 47)
 			break
 
-	return '/*' + slice(index, position$1 - 1) + '*' + from(type === 47 ? type : next())
+	return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())
 }
 
 /**
@@ -742,7 +742,7 @@ function identifier (index) {
 	while (!token(peek()))
 		next();
 
-	return slice(index, position$1)
+	return slice(index, position)
 }
 
 /**
@@ -1029,7 +1029,7 @@ var identifierWithPointTracking = function identifierWithPointTracking(begin, po
     next();
   }
 
-  return slice(begin, position$1);
+  return slice(begin, position);
 };
 
 var toRules = function toRules(parsed, points) {
@@ -1049,7 +1049,7 @@ var toRules = function toRules(parsed, points) {
           points[index] = 1;
         }
 
-        parsed[index] += identifierWithPointTracking(position$1 - 1, points, index);
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
         break;
 
       case 2:
@@ -4025,7 +4025,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes = {
   styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])
 } : void 0;
 
-/** @license MUI v5.10.16
+/** @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.
@@ -5103,7 +5103,7 @@ function getStyleValue$1(themeMapping, transform, propValueFinal, userValue = pr
     value = getPath(themeMapping, propValueFinal) || userValue;
   }
   if (transform) {
-    value = transform(value, userValue);
+    value = transform(value, userValue, themeMapping);
   }
   return value;
 }
@@ -5114,6 +5114,9 @@ function style$1(options) {
     themeKey,
     transform
   } = options;
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     if (props[prop] == null) {
       return null;
@@ -5150,6 +5153,9 @@ 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]) {
@@ -5289,24 +5295,28 @@ 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;
   }
@@ -5315,27 +5325,27 @@ function getBorder(value) {
 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',
@@ -5357,6 +5367,9 @@ 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');
@@ -5371,77 +5384,10 @@ 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');
@@ -5456,6 +5402,9 @@ 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');
@@ -5470,6 +5419,9 @@ 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');
@@ -5511,10 +5463,9 @@ 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;
   }
@@ -5523,55 +5474,27 @@ function transform$1(value, userValue) {
 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$2 = 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$2, top, right, bottom, left);
-
-const boxShadow = style$1({
-  prop: 'boxShadow',
-  themeKey: 'shadows'
+  transform: paletteTransform
 });
-var shadows$2 = 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) {
@@ -5579,7 +5502,7 @@ const maxWidth = props => {
       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$1[propValue];
       return {
-        maxWidth: breakpoint || transform(propValue)
+        maxWidth: breakpoint || sizingTransform(propValue)
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -5589,102 +5512,314 @@ const maxWidth = props => {
 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$2.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: shadows$2,
-  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)), []);
@@ -5696,24 +5831,48 @@ function callIfFn(maybeFn, arg) {
 }
 
 // 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,
+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$1(themeMapping, transform, propValueFinal);
+      if (propValueFinal === value && typeof propValueFinal === 'string') {
+        // Haven't found value
+        value = getStyleValue$1(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 = {}
@@ -5722,6 +5881,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
       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.
@@ -5745,8 +5906,8 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
         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
@@ -5763,7 +5924,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
@@ -5775,16 +5936,18 @@ function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMa
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var defaultStyleFunctionSx = styleFunctionSx;
+var styleFunctionSx$1 = styleFunctionSx;
 
 const _excluded$L = ["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];
@@ -5959,6 +6122,13 @@ function createTheme$1(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;
 }
 
@@ -6053,12 +6223,11 @@ function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = defaultStyleFunctionSx
+    generateClassName
   } = options;
   const BoxRoot = styled$2('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
+  })(styleFunctionSx$1);
   const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
     const theme = useTheme$1(defaultTheme);
     const _extendSxProp = extendSxProp(inProps),
@@ -6193,12 +6362,11 @@ function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = defaultStyleFunctionSx
+    slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
     const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
-    return styleFunctionSx(_extends({}, props, {
+    return styleFunctionSx$1(_extends({}, props, {
       theme
     }));
   };
@@ -7182,6 +7350,13 @@ Please use another name.` : formatMuiErrorMessage(18));
       }
     });
   }
+  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;
 }
 
@@ -38925,7 +39100,7 @@ const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUns
       slots = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded$A);
-  const [exited, setExited] = React__namespace.useState(true);
+  const [exited, setExited] = React__namespace.useState(!open);
   const modal = React__namespace.useRef({});
   const mountNodeRef = React__namespace.useRef(null);
   const modalRef = React__namespace.useRef(null);
@@ -45520,7 +45695,7 @@ const FormControlRoot = styled$1('div', {
  * </FormControl>
  * ```
  *
- * ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
  * For instance, only one input can be focused at the same time, the state shouldn't be shared.
  */
 const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
@@ -48235,7 +48410,6 @@ const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref
     }
   });
   return /*#__PURE__*/jsxRuntime.jsx(MenuRoot, _extends({
-    classes: PopoverClasses,
     onClose: onClose,
     anchorOrigin: {
       vertical: 'bottom',
@@ -48258,6 +48432,7 @@ const Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref
     }, TransitionProps),
     ownerState: ownerState
   }, other, {
+    classes: PopoverClasses,
     children: /*#__PURE__*/jsxRuntime.jsx(MenuMenuList, _extends({
       onKeyDown: handleListKeyDown,
       actions: menuListActionsRef,
@@ -50455,7 +50630,7 @@ var __assign = function() {
 
 /**
  * Do not edit directly
- * Generated on Tue, 29 Nov 2022 10:20:00 GMT
+ * Generated on Thu, 08 Dec 2022 17:56:08 GMT
  */
 var DefaultWebShadowAllContent = { "color": "#2727271f", "type": "dropShadow", "x": "0", "y": "2", "blur": "10", "spread": "0" };
 var DefaultSpacingXxs = "4";
@@ -50837,7 +51012,7 @@ var useMaterialThemeCss = function (muiTokens) {
                 MuiInputLabel: {
                     styleOverrides: {
                         root: {
-                            fontSize: '16px',
+                            fontSize: '17.33px',
                             lineHeight: '16px',
                             fontWeight: 500,
                             color: muiTokens.palette.greyXDark,