@mui/system 5.0.1 → 5.0.5

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -32,11 +32,11 @@ function styleFunctionSx(props) {
     return null;
   }
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
+  var stylesObject = styles;
 
-  if (_typeof(styles) !== 'object') {
+  if (typeof styles === 'function') {
+    stylesObject = styles(theme);
+  } else if (_typeof(styles) !== 'object') {
     // value
     return styles;
   }
@@ -44,8 +44,8 @@ function styleFunctionSx(props) {
   var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
   var breakpointsKeys = Object.keys(emptyBreakpoints);
   var css = emptyBreakpoints;
-  Object.keys(styles).forEach(function (styleKey) {
-    var value = callIfFn(styles[styleKey], theme);
+  Object.keys(stylesObject).forEach(function (styleKey) {
+    var value = callIfFn(stylesObject[styleKey], theme);
 
     if (_typeof(value) === 'object') {
       if (propToStyleFunction[styleKey]) {

package/modern/cssVars/createCssVarsProvider.js

@@ -0,0 +1,188 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+const _excluded = ["colorSchemes"],
+      _excluded2 = ["colorSchemes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { GlobalStyles } from '@mui/styled-engine';
+import { deepmerge } from '@mui/utils';
+import cssVarsParser from './cssVarsParser';
+import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const resolveMode = (key, fallback, supportedColorSchemes) => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  let value;
+
+  try {
+    value = localStorage.getItem(key) || undefined;
+
+    if (!supportedColorSchemes.includes(value)) {
+      value = undefined;
+    }
+  } catch (e) {// Unsupported
+  }
+
+  return value || fallback;
+};
+
+export default function createCssVarsProvider(ThemeContext, options) {
+  const {
+    theme: baseTheme = {},
+    defaultColorScheme: designSystemColorScheme,
+    prefix: designSystemPrefix = ''
+  } = options;
+
+  if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
+    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+  }
+
+  const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+
+  const useColorScheme = () => {
+    const value = React.useContext(ColorSchemeContext);
+
+    if (!value) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
+    }
+
+    return value;
+  };
+
+  function CssVarsProvider({
+    children,
+    theme: themeProp = {},
+    prefix = designSystemPrefix,
+    storageKey = DEFAULT_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE,
+    defaultColorScheme = designSystemColorScheme
+  }) {
+    const {
+      colorSchemes: baseColorSchemes = {}
+    } = baseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+
+    const {
+      colorSchemes: colorSchemesProp = {}
+    } = themeProp,
+          restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
+
+    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
+    const allColorSchemes = Object.keys(colorSchemes);
+    const joinedColorSchemes = allColorSchemes.join(',');
+    const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
+    const resolvedColorScheme = colorScheme || defaultColorScheme;
+    const {
+      css: rootCss,
+      vars: rootVars
+    } = cssVarsParser(mergedTheme, {
+      prefix
+    });
+    mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      vars: rootVars
+    });
+    const styleSheet = {};
+    Object.entries(colorSchemes).forEach(([key, scheme]) => {
+      const {
+        css,
+        vars
+      } = cssVarsParser(scheme, {
+        prefix
+      });
+
+      if (key === resolvedColorScheme) {
+        mergedTheme.vars = _extends({}, mergedTheme.vars, vars);
+      }
+
+      if (key === defaultColorScheme) {
+        styleSheet[':root'] = deepmerge(rootCss, css);
+      } else {
+        styleSheet[`[${attribute}="${key}"]`] = css;
+      }
+    });
+    React.useEffect(() => {
+      if (colorScheme) {
+        document.body.setAttribute(attribute, colorScheme);
+        localStorage.setItem(storageKey, colorScheme);
+      }
+    }, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
+
+    React.useEffect(() => {
+      const handleStorage = event => {
+        const storageColorScheme = event.newValue;
+
+        if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
+          if (storageColorScheme) {
+            setColorScheme(storageColorScheme);
+          }
+        }
+      };
+
+      window.addEventListener('storage', handleStorage);
+      return () => window.removeEventListener('storage', handleStorage);
+    }, [setColorScheme, storageKey, joinedColorSchemes]);
+    const wrappedSetColorScheme = React.useCallback(val => {
+      if (typeof val === 'string' && !allColorSchemes.includes(val)) {
+        console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setColorScheme(val);
+      }
+    }, [setColorScheme, allColorSchemes]);
+    return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
+      value: {
+        colorScheme,
+        setColorScheme: wrappedSetColorScheme,
+        allColorSchemes
+      },
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styleSheet
+      }), /*#__PURE__*/_jsx(ThemeContext.Provider, {
+        value: mergedTheme,
+        children: children
+      })]
+    });
+  }
+
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The body attribute name to attach colorScheme.
+     */
+    attribute: PropTypes.string,
+
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+
+    /**
+     * The initial color scheme used.
+     */
+    defaultColorScheme: PropTypes.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
+
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    storageKey: PropTypes.string,
+
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  return {
+    CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript
+  };
+}

package/modern/cssVars/cssVarsParser.js

@@ -0,0 +1,112 @@
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export const assignNestedKeys = (obj, keys, value) => {
+  let temp = obj;
+  keys.forEach((k, index) => {
+    if (index === keys.length - 1) {
+      if (temp && typeof temp === 'object') {
+        temp[k] = value;
+      }
+    } else if (temp && typeof temp === 'object') {
+      if (!temp[k]) {
+        temp[k] = {};
+      }
+
+      temp = temp[k];
+    }
+  });
+};
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+
+export const walkObjectDeep = (obj, callback) => {
+  function recurse(object, parentKeys = []) {
+    Object.entries(object).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        if (typeof value === 'object' && Object.keys(value).length > 0) {
+          recurse(value, [...parentKeys, key]);
+        } else {
+          callback([...parentKeys, key], value);
+        }
+      }
+    });
+  }
+
+  recurse(obj);
+};
+
+const getCssValue = (keys, value) => {
+  if (typeof value === 'number') {
+    if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+      // css property that are unitless
+      return value;
+    }
+
+    return `${value}px`;
+  }
+
+  return value;
+};
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{ prefix?: string }} options
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+
+
+export default function cssVarsParser(obj, options) {
+  const {
+    prefix
+  } = options || {};
+  const css = {};
+  const vars = {};
+  walkObjectDeep(obj, (keys, value) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+      Object.assign(css, {
+        [cssVar]: getCssValue(keys, value)
+      });
+      assignNestedKeys(vars, keys, `var(${cssVar})`);
+    }
+  });
+  return {
+    css,
+    vars
+  };
+}

package/modern/cssVars/getInitColorSchemeScript.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DEFAULT_STORAGE_KEY = 'mui-color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export default function getInitColorSchemeScript(options) {
+  const {
+    storageKey = DEFAULT_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE
+  } = options || {};
+  return /*#__PURE__*/_jsx("script", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: `(function() { try {
+        var colorScheme = localStorage.getItem('${storageKey}');
+        if (colorScheme) {
+          document.body.setAttribute('${attribute}', colorScheme);
+        }
+      } catch (e) {} })();`
+    }
+  });
+}

package/modern/cssVars/index.js

@@ -0,0 +1 @@
+export { default } from './createCssVarsProvider';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.1
+/** @license MUI v5.0.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,4 +41,5 @@ export { default as useThemeProps, getThemeProps } from './useThemeProps';
 export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';

package/modern/spacing.js

@@ -39,8 +39,8 @@ const getCssProperties = memoize(prop => {
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
-const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY'];
-const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
+const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   const themeSpacing = getPath(theme, themeKey) || defaultValue;

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -22,11 +22,11 @@ function styleFunctionSx(props) {
     return null;
   }
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
+  let stylesObject = styles;
 
-  if (typeof styles !== 'object') {
+  if (typeof styles === 'function') {
+    stylesObject = styles(theme);
+  } else if (typeof styles !== 'object') {
     // value
     return styles;
   }
@@ -34,8 +34,8 @@ function styleFunctionSx(props) {
   const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
   const breakpointsKeys = Object.keys(emptyBreakpoints);
   let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+  Object.keys(stylesObject).forEach(styleKey => {
+    const value = callIfFn(stylesObject[styleKey], theme);
 
     if (typeof value === 'object') {
       if (propToStyleFunction[styleKey]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.0.1",
+  "version": "5.0.5",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
     "react": "^17.0.2"

package/palette.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.backgroundColor = exports.bgcolor = exports.color = void 0;
+exports.default = exports.color = exports.bgcolor = exports.backgroundColor = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/positions.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.left = exports.bottom = exports.right = exports.top = exports.zIndex = exports.position = void 0;
+exports.zIndex = exports.top = exports.right = exports.position = exports.left = exports.default = exports.bottom = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/sizing.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.boxSizing = exports.sizeHeight = exports.sizeWidth = exports.minHeight = exports.maxHeight = exports.height = exports.minWidth = exports.maxWidth = exports.width = void 0;
+exports.width = exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/spacing.d.ts

@@ -25,6 +25,12 @@ export const margin: SimpleStyleFunction<
   | 'marginLeft'
   | 'marginX'
   | 'marginY'
+  | 'marginInline'
+  | 'marginInlineStart'
+  | 'marginInlineEnd'
+  | 'marginBlock'
+  | 'marginBlockStart'
+  | 'marginBlockEnd'
 >;
 
 export type MarginProps = PropsFor<typeof margin>;
@@ -44,6 +50,12 @@ export const padding: SimpleStyleFunction<
   | 'paddingLeft'
   | 'paddingX'
   | 'paddingY'
+  | 'paddingInline'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
+  | 'paddingBlock'
+  | 'paddingBlockStart'
+  | 'paddingBlockEnd'
 >;
 
 export type PaddingProps = PropsFor<typeof padding>;

package/spacing.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createUnaryUnit = createUnaryUnit;
 exports.createUnarySpacing = createUnarySpacing;
-exports.getValue = getValue;
+exports.createUnaryUnit = createUnaryUnit;
+exports.default = void 0;
 exports.getStyleFromPropValue = getStyleFromPropValue;
+exports.getValue = getValue;
 exports.margin = margin;
 exports.padding = padding;
-exports.default = void 0;
 
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 
@@ -59,8 +59,8 @@ const getCssProperties = (0, _memoize.default)(prop => {
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
-const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY'];
-const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];
+const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {

package/style.d.ts

@@ -1,5 +1,5 @@
+import { CSSObject } from '@mui/styled-engine';
 import { StyleFunction } from './Box';
-import { CSSObject } from './createStyled';
 
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false;
@@ -12,4 +12,4 @@ export interface StyleOptions<PropKey> {
 }
 export function style<PropKey extends string, Theme extends object>(
   options: StyleOptions<PropKey>,
-): StyleFunction<{ [K in PropKey]?: unknown } & { theme: Theme }>;
+): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }>;

package/style.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPath = getPath;
 exports.default = void 0;
+exports.getPath = getPath;
 
 var _utils = require("@mui/utils");
 

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -14,14 +14,14 @@ export type ResponsiveStyleValue<T> = T | Array<T | null> | { [key: string]: T |
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...).
  */
 export type CSSPseudoSelectorProps<Theme extends object = {}> = {
-  [K in CSS.Pseudos]?: SystemStyleObject<Theme>;
+  [K in CSS.Pseudos]?: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
 };
 
 /**
  * Map all nested selectors.
  */
 export interface CSSSelectorObject<Theme extends object = {}> {
-  [cssSelector: string]: SystemStyleObject<Theme>;
+  [cssSelector: string]: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
 }
 
 /**
@@ -51,7 +51,12 @@ export type SystemStyleObject<Theme extends object = {}> =
   | CSSSelectorObject<Theme>
   | null;
 
-export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme>;
+/**
+ * The `SxProps` can be either object or function
+ */
+export type SxProps<Theme extends object = {}> =
+  | SystemStyleObject<Theme>
+  | ((theme: Theme) => SystemStyleObject<Theme>);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;

package/styleFunctionSx/styleFunctionSx.js

@@ -37,11 +37,11 @@ function styleFunctionSx(props) {
     return null;
   }
 
-  if (typeof styles === 'function') {
-    return styles(theme);
-  }
+  let stylesObject = styles;
 
-  if (typeof styles !== 'object') {
+  if (typeof styles === 'function') {
+    stylesObject = styles(theme);
+  } else if (typeof styles !== 'object') {
     // value
     return styles;
   }
@@ -49,8 +49,8 @@ function styleFunctionSx(props) {
   const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
   const breakpointsKeys = Object.keys(emptyBreakpoints);
   let css = emptyBreakpoints;
-  Object.keys(styles).forEach(styleKey => {
-    const value = callIfFn(styles[styleKey], theme);
+  Object.keys(stylesObject).forEach(styleKey => {
+    const value = callIfFn(stylesObject[styleKey], theme);
 
     if (typeof value === 'object') {
       if (_getThemeValue.propToStyleFunction[styleKey]) {

package/typography.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = void 0;
+exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 

package/useTheme.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.systemDefaultTheme = void 0;
+exports.systemDefaultTheme = exports.default = void 0;
 
 var _createTheme = _interopRequireDefault(require("./createTheme"));