@mui/system 5.2.6 → 5.4.1

package/ThemeProvider/ThemeProvider.d.ts

@@ -10,7 +10,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/api/theme-provider/)
+ * - [ThemeProvider API](/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(
   props: ThemeProviderProps<T>,

package/createStyled.js

@@ -156,7 +156,11 @@ function createStyled(input = {}) {
           const styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            const resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -218,6 +222,10 @@ function createStyled(input = {}) {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/cssVars/createCssVarsProvider.js

@@ -32,7 +32,7 @@ var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorS
 
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 
-var _createGetThemeVar = _interopRequireDefault(require("./createGetThemeVar"));
+var _createGetCssVar = _interopRequireDefault(require("./createGetCssVar"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -154,7 +154,7 @@ function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: (0, _createGetThemeVar.default)(prefix)
+      getCssVar: (0, _createGetCssVar.default)(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/cssVars/createGetCssVar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;

package/cssVars/createGetCssVar.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGetCssVar;
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/esm/createStyled.js

@@ -138,7 +138,11 @@ export default function createStyled(input = {}) {
           const styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            const resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -201,6 +205,10 @@ export default function createStyled(input = {}) {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/esm/cssVars/createCssVarsProvider.js

@@ -14,7 +14,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetThemeVar from './createGetThemeVar';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -128,7 +128,7 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: createGetThemeVar(prefix)
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/esm/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/esm/index.js

@@ -39,4 +39,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/esm/typography.js

@@ -19,6 +19,9 @@ export const fontWeight = style({
 export const letterSpacing = style({
   prop: 'letterSpacing'
 });
+export const textTransform = style({
+  prop: 'textTransform'
+});
 export const lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export const typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/index.d.ts

@@ -88,6 +88,7 @@ export const fontWeight: SimpleStyleFunction<'fontWeight'>;
 export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
 export const lineHeight: SimpleStyleFunction<'lineHeight'>;
 export const textAlign: SimpleStyleFunction<'textAlign'>;
+export const textTransform: SimpleStyleFunction<'textTransform'>;
 export type TypographyProps = PropsFor<typeof typography>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -161,5 +162,5 @@ export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 
 export { default as unstable_createCssVarsProvider } from './cssVars';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
 export * from './cssVars';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -50,7 +50,7 @@ var _exportNames = {
   useThemeWithoutDefault: true,
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
-  unstable_createGetThemeVar: true
+  unstable_createGetCssVar: true
 };
 Object.defineProperty(exports, "Box", {
   enumerable: true,
@@ -244,10 +244,10 @@ Object.defineProperty(exports, "unstable_createCssVarsProvider", {
     return _createCssVarsProvider.default;
   }
 });
-Object.defineProperty(exports, "unstable_createGetThemeVar", {
+Object.defineProperty(exports, "unstable_createGetCssVar", {
   enumerable: true,
   get: function () {
-    return _createGetThemeVar.default;
+    return _createGetCssVar.default;
   }
 });
 Object.defineProperty(exports, "unstable_extendSxProp", {
@@ -475,7 +475,7 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
 
-var _createGetThemeVar = _interopRequireDefault(require("./cssVars/createGetThemeVar"));
+var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/legacy/createStyled.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import styledEngineStyled from '@mui/styled-engine';
@@ -139,7 +140,15 @@ export default function createStyled() {
           var styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            var resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(function (_ref2) {
+              var _ref3 = _slicedToArray(_ref2, 2),
+                  slotKey = _ref3[0],
+                  slotStyle = _ref3[1];
+
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -171,9 +180,9 @@ export default function createStyled() {
         transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
       } else if (typeof styleArg === 'function') {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = function transformedStyleArg(_ref2) {
-          var themeInput = _ref2.theme,
-              other = _objectWithoutProperties(_ref2, ["theme"]);
+        transformedStyleArg = function transformedStyleArg(_ref4) {
+          var themeInput = _ref4.theme,
+              other = _objectWithoutProperties(_ref4, ["theme"]);
 
           return styleArg(_extends({
             theme: isEmpty(themeInput) ? defaultTheme : themeInput
@@ -200,6 +209,10 @@ export default function createStyled() {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -13,7 +13,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetThemeVar from './createGetThemeVar';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -134,7 +134,7 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: createGetThemeVar(prefix)
+      getCssVar: createGetCssVar(prefix)
     });
     var styleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {

package/legacy/cssVars/{createGetThemeVar.js → createGetCssVar.js}

@@ -1,5 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-export default function createGetThemeVar() {
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar() {
   var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
   function appendVar() {
@@ -12,9 +17,10 @@ export default function createGetThemeVar() {
     }
 
     return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(vars[0]).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
-  }
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
 
-  var getThemeVar = function getThemeVar(field) {
+  var getCssVar = function getCssVar(field) {
     for (var _len2 = arguments.length, vars = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       vars[_key2 - 1] = arguments[_key2];
     }
@@ -22,5 +28,5 @@ export default function createGetThemeVar() {
     return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, vars), ")");
   };
 
-  return getThemeVar;
+  return getCssVar;
 }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -44,4 +44,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/legacy/typography.js

@@ -19,6 +19,9 @@ export var fontWeight = style({
 export var letterSpacing = style({
   prop: 'letterSpacing'
 });
+export var textTransform = style({
+  prop: 'textTransform'
+});
 export var lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export var typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-var typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+var typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/modern/createStyled.js

@@ -136,7 +136,11 @@ export default function createStyled(input = {}) {
           const styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            const resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -199,6 +203,10 @@ export default function createStyled(input = {}) {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -14,7 +14,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetThemeVar from './createGetThemeVar';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -126,7 +126,7 @@ export default function createCssVarsProvider(options) {
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
       breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
-      getThemeVar: createGetThemeVar(prefix)
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/modern/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -44,4 +44,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/modern/typography.js

@@ -19,6 +19,9 @@ export const fontWeight = style({
 export const letterSpacing = style({
   prop: 'letterSpacing'
 });
+export const textTransform = style({
+  prop: 'textTransform'
+});
 export const lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export const typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.6",
+  "version": "5.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -13,12 +13,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-system"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui-org/material-ui/issues"
+    "url": "https://github.com/mui/material-ui/issues"
   },
   "homepage": "https://mui.com/system/basics/",
   "funding": {
@@ -29,7 +29,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.2"
+    "react": "^17.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.3",
-    "@mui/styled-engine": "^5.2.6",
-    "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.3",
+    "@babel/runtime": "^7.17.0",
+    "@mui/private-theming": "^5.4.1",
+    "@mui/styled-engine": "^5.4.1",
+    "@mui/types": "^7.1.1",
+    "@mui/utils": "^5.4.1",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",
     "prop-types": "^15.7.2"

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -49,6 +49,7 @@ export type SystemStyleObject<Theme extends object = {}> =
   | SystemCssProperties<Theme>
   | CSSPseudoSelectorProps<Theme>
   | CSSSelectorObject<Theme>
+  | { [cssVariable: string]: string | number }
   | null;
 
 /**

package/typography.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
+exports.typographyVariant = exports.textTransform = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 
@@ -35,6 +35,10 @@ const letterSpacing = (0, _style.default)({
   prop: 'letterSpacing'
 });
 exports.letterSpacing = letterSpacing;
+const textTransform = (0, _style.default)({
+  prop: 'textTransform'
+});
+exports.textTransform = textTransform;
 const lineHeight = (0, _style.default)({
   prop: 'lineHeight'
 });
@@ -49,6 +53,6 @@ const typographyVariant = (0, _style.default)({
   themeKey: 'typography'
 });
 exports.typographyVariant = typographyVariant;
-const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 var _default = typography;
 exports.default = _default;

package/cssVars/createGetThemeVar.d.ts

@@ -1 +0,0 @@
-export default function createGetThemeVar<T extends string = string>(prefix?: string): (field: T, ...vars: T[]) => string;

package/cssVars/createGetThemeVar.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createGetThemeVar;
-
-function createGetThemeVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
-  }
-
-  const getThemeVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getThemeVar;
-}

package/esm/cssVars/createGetThemeVar.js

@@ -1,15 +0,0 @@
-export default function createGetThemeVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
-  }
-
-  const getThemeVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getThemeVar;
-}

package/modern/cssVars/createGetThemeVar.js

@@ -1,15 +0,0 @@
-export default function createGetThemeVar(prefix = '') {
-  function appendVar(...vars) {
-    if (!vars.length) {
-      return '';
-    }
-
-    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
-  }
-
-  const getThemeVar = (field, ...vars) => {
-    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-  };
-
-  return getThemeVar;
-}