@mui/system 9.0.0-alpha.3 → 9.0.0-beta.0

package/spacing/spacing.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createUnarySpacing = createUnarySpacing;
 exports.createUnaryUnit = createUnaryUnit;
 exports.default = void 0;
-exports.getStyleFromPropValue = getStyleFromPropValue;
 exports.getValue = getValue;
 exports.margin = margin;
 exports.marginKeys = void 0;
@@ -16,8 +15,11 @@ exports.paddingKeys = void 0;
 var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
 var _breakpoints = require("../breakpoints");
 var _style = require("../style");
-var _merge = _interopRequireDefault(require("../merge"));
-var _memoize = _interopRequireDefault(require("../memoize"));
+/* eslint-disable guard-for-in */
+
+const EMPTY_THEME = {
+  internal_cache: {}
+};
 const properties = {
   m: 'margin',
   p: 'padding'
@@ -36,27 +38,24 @@ const aliases = {
   paddingX: 'px',
   paddingY: 'py'
 };
-
-// memoize() impact:
-// From 300,000 ops/sec
-// To 350,000 ops/sec
-const getCssProperties = (0, _memoize.default)(prop => {
-  // It's not a shorthand notation.
-  if (prop.length > 2) {
-    if (aliases[prop]) {
-      prop = aliases[prop];
-    } else {
-      return [prop];
-    }
+const CSS_PROPERTIES = {};
+for (const key in properties) {
+  CSS_PROPERTIES[key] = [properties[key]];
+}
+for (const keyProperty in properties) {
+  for (const keyDirection in directions) {
+    const property = properties[keyProperty];
+    const direction = directions[keyDirection];
+    const value = Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
+    CSS_PROPERTIES[keyProperty + keyDirection] = value;
   }
-  const [a, b] = prop.split('');
-  const property = properties[a];
-  const direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
-});
-const marginKeys = exports.marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-const paddingKeys = exports.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];
+}
+for (const key in aliases) {
+  CSS_PROPERTIES[key] = CSS_PROPERTIES[aliases[key]];
+}
+const marginKeys = exports.marginKeys = new Set(['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd']);
+const paddingKeys = exports.paddingKeys = new Set(['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd']);
+const spacingKeys = new Set([...marginKeys, ...paddingKeys]);
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
@@ -124,31 +123,32 @@ function getValue(transformer, propValue) {
   }
   return transformer(propValue);
 }
-function getStyleFromPropValue(cssProperties, transformer) {
-  return propValue => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue(transformer, propValue);
-    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.includes(prop)) {
-    return null;
-  }
-  const cssProperties = getCssProperties(prop);
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
-}
+
+// Avoid allocations
+const container = [''];
 function style(props, keys) {
-  const transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(_merge.default, {});
+  const theme = props.theme ?? EMPTY_THEME;
+  const transformer = theme?.internal_cache?.unarySpacing ?? createUnarySpacing(theme);
+  const result = {};
+  for (const prop in props) {
+    if (!keys.has(prop)) {
+      continue;
+    }
+    const cssProperties = CSS_PROPERTIES[prop] ?? (container[0] = prop, container);
+    const propValue = props[prop];
+    (0, _breakpoints.iterateBreakpoints)(result, props.theme, propValue, (mediaKey, value) => {
+      const target = mediaKey ? result[mediaKey] : result;
+      for (let i = 0; i < cssProperties.length; i += 1) {
+        target[cssProperties[i]] = getValue(transformer, value);
+      }
+    });
+  }
+  return result;
 }
 function margin(props) {
   return style(props, marginKeys);
 }
-margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
+margin.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(marginKeys).reduce((obj, key) => {
   obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};
@@ -156,7 +156,7 @@ margin.filterProps = marginKeys;
 function padding(props) {
   return style(props, paddingKeys);
 }
-padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
+padding.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(paddingKeys).reduce((obj, key) => {
   obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};
@@ -164,7 +164,7 @@ padding.filterProps = paddingKeys;
 function spacing(props) {
   return style(props, spacingKeys);
 }
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+spacing.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(spacingKeys).reduce((obj, key) => {
   obj[key] = _responsivePropType.default;
   return obj;
 }, {}) : {};

package/spacing/spacing.mjs

@@ -1,8 +1,12 @@
 import responsivePropType from "../responsivePropType/index.mjs";
-import { handleBreakpoints } from "../breakpoints/index.mjs";
+import { iterateBreakpoints } from "../breakpoints/index.mjs";
 import { getPath } from "../style/index.mjs";
-import merge from "../merge/index.mjs";
-import memoize from "../memoize/index.mjs";
+
+/* eslint-disable guard-for-in */
+
+const EMPTY_THEME = {
+  internal_cache: {}
+};
 const properties = {
   m: 'margin',
   p: 'padding'
@@ -21,27 +25,24 @@ const aliases = {
   paddingX: 'px',
   paddingY: 'py'
 };
-
-// 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) {
-    if (aliases[prop]) {
-      prop = aliases[prop];
-    } else {
-      return [prop];
-    }
+const CSS_PROPERTIES = {};
+for (const key in properties) {
+  CSS_PROPERTIES[key] = [properties[key]];
+}
+for (const keyProperty in properties) {
+  for (const keyDirection in directions) {
+    const property = properties[keyProperty];
+    const direction = directions[keyDirection];
+    const value = Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
+    CSS_PROPERTIES[keyProperty + keyDirection] = value;
   }
-  const [a, b] = prop.split('');
-  const property = properties[a];
-  const direction = directions[b] || '';
-  return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
-});
-export const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-export 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];
+}
+for (const key in aliases) {
+  CSS_PROPERTIES[key] = CSS_PROPERTIES[aliases[key]];
+}
+export const marginKeys = new Set(['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd']);
+export const paddingKeys = new Set(['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd']);
+const spacingKeys = new Set([...marginKeys, ...paddingKeys]);
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
@@ -109,31 +110,32 @@ export function getValue(transformer, propValue) {
   }
   return transformer(propValue);
 }
-export function getStyleFromPropValue(cssProperties, transformer) {
-  return propValue => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue(transformer, propValue);
-    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.includes(prop)) {
-    return null;
-  }
-  const cssProperties = getCssProperties(prop);
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
+
+// Avoid allocations
+const container = [''];
 function style(props, keys) {
-  const transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
+  const theme = props.theme ?? EMPTY_THEME;
+  const transformer = theme?.internal_cache?.unarySpacing ?? createUnarySpacing(theme);
+  const result = {};
+  for (const prop in props) {
+    if (!keys.has(prop)) {
+      continue;
+    }
+    const cssProperties = CSS_PROPERTIES[prop] ?? (container[0] = prop, container);
+    const propValue = props[prop];
+    iterateBreakpoints(result, props.theme, propValue, (mediaKey, value) => {
+      const target = mediaKey ? result[mediaKey] : result;
+      for (let i = 0; i < cssProperties.length; i += 1) {
+        target[cssProperties[i]] = getValue(transformer, value);
+      }
+    });
+  }
+  return result;
 }
 export function margin(props) {
   return style(props, marginKeys);
 }
-margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
+margin.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(marginKeys).reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
@@ -141,7 +143,7 @@ margin.filterProps = marginKeys;
 export function padding(props) {
   return style(props, paddingKeys);
 }
-padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
+padding.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(paddingKeys).reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
@@ -149,7 +151,7 @@ padding.filterProps = paddingKeys;
 function spacing(props) {
   return style(props, spacingKeys);
 }
-spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
+spacing.propTypes = process.env.NODE_ENV !== 'production' ? Array.from(spacingKeys).reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {}) : {};

package/style/index.d.mts

@@ -1,2 +1,3 @@
 export { default } from "./style.mjs";
+export { default as style } from "./style.mjs";
 export * from "./style.mjs";

package/style/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./style.js";
+export { default as style } from "./style.js";
 export * from "./style.js";

package/style/index.js

@@ -4,13 +4,21 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  style: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _style.default;
   }
 });
+Object.defineProperty(exports, "style", {
+  enumerable: true,
+  get: function () {
+    return _style.default;
+  }
+});
 var _style = _interopRequireWildcard(require("./style"));
 Object.keys(_style).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/style/index.mjs

@@ -1,2 +1,3 @@
 export { default } from "./style.mjs";
+export { default as style } from "./style.mjs";
 export * from "./style.mjs";

package/style/style.d.mts

@@ -1,10 +1,10 @@
-import { CSSObject } from '@mui/styled-engine';
-export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
+import type { CSSObject } from '@mui/styled-engine';
 export type StyleFunction<Props> = (props: Props) => any;
+export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
 export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>> & {
   filterProps: string[];
 };
-export type TransformFunction = (cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject;
+export type TransformFunction = (cssValue: unknown, userValue: unknown, transform: object | ((arg: any) => any) | undefined | null) => number | string | React.CSSProperties | CSSObject;
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false | undefined;
   prop: PropKey;
@@ -14,10 +14,39 @@ export interface StyleOptions<PropKey> {
   themeKey?: string | undefined;
   transform?: TransformFunction | undefined;
 }
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
-export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+/**
+ * TODO(v7): Keep either this one or `getStyleValue2`
+ */
+export declare function getStyleValue(themeMapping: object | ((arg: any) => any) | null | undefined, transform: TransformFunction | null | undefined, valueFinal: unknown, userValue?: unknown): any;
+/**
+ * HACK: The `alternateProp` logic is there because our theme looks like this:
+ * {
+ *   typography: {
+ *     fontFamily: 'comic sans',
+ *     fontFamilyCode: 'courrier new',
+ *   }
+ * }
+ * And we support targetting:
+ * - `typography.fontFamily`     with `sx={{ fontFamily: 'default' }}`
+ * - `typography.fontFamilyCode` with `sx={{ fontFamily: 'code' }}`
+ *
+ * TODO(v7): Refactor our theme to look like this and remove the horrendous logic:
+ * {
+ *   typography: {
+ *     fontFamily: {
+ *       default: 'comic sans',
+ *       code: 'courrier new',
+ *     }
+ *   }
+ * }
+ */
+export declare function getStyleValue2(themeMapping: object | ((arg: any) => any) | null | undefined, transform: TransformFunction | null | undefined, userValue: unknown, alternateProp: string | undefined): any;
+export declare function getPath<T extends Record<string, any> | undefined | null>(obj: T, pathInput: string | undefined, checkVars?: boolean, alternateProp?: string | undefined): null | unknown;
+type StyleResult<PropKey extends string | number | symbol, Theme> = StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme | undefined;
 }> & {
   filterProps: string[];
-};
+  propTypes: any;
+};
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleResult<PropKey, Theme>;
+export {};

package/style/style.d.ts

@@ -1,10 +1,10 @@
-import { CSSObject } from '@mui/styled-engine';
-export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
+import type { CSSObject } from '@mui/styled-engine';
 export type StyleFunction<Props> = (props: Props) => any;
+export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
 export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>> & {
   filterProps: string[];
 };
-export type TransformFunction = (cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject;
+export type TransformFunction = (cssValue: unknown, userValue: unknown, transform: object | ((arg: any) => any) | undefined | null) => number | string | React.CSSProperties | CSSObject;
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false | undefined;
   prop: PropKey;
@@ -14,10 +14,39 @@ export interface StyleOptions<PropKey> {
   themeKey?: string | undefined;
   transform?: TransformFunction | undefined;
 }
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
-export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+/**
+ * TODO(v7): Keep either this one or `getStyleValue2`
+ */
+export declare function getStyleValue(themeMapping: object | ((arg: any) => any) | null | undefined, transform: TransformFunction | null | undefined, valueFinal: unknown, userValue?: unknown): any;
+/**
+ * HACK: The `alternateProp` logic is there because our theme looks like this:
+ * {
+ *   typography: {
+ *     fontFamily: 'comic sans',
+ *     fontFamilyCode: 'courrier new',
+ *   }
+ * }
+ * And we support targetting:
+ * - `typography.fontFamily`     with `sx={{ fontFamily: 'default' }}`
+ * - `typography.fontFamilyCode` with `sx={{ fontFamily: 'code' }}`
+ *
+ * TODO(v7): Refactor our theme to look like this and remove the horrendous logic:
+ * {
+ *   typography: {
+ *     fontFamily: {
+ *       default: 'comic sans',
+ *       code: 'courrier new',
+ *     }
+ *   }
+ * }
+ */
+export declare function getStyleValue2(themeMapping: object | ((arg: any) => any) | null | undefined, transform: TransformFunction | null | undefined, userValue: unknown, alternateProp: string | undefined): any;
+export declare function getPath<T extends Record<string, any> | undefined | null>(obj: T, pathInput: string | undefined, checkVars?: boolean, alternateProp?: string | undefined): null | unknown;
+type StyleResult<PropKey extends string | number | symbol, Theme> = StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme | undefined;
 }> & {
   filterProps: string[];
-};
+  propTypes: any;
+};
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleResult<PropKey, Theme>;
+export {};

package/style/style.js

@@ -4,45 +4,105 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = style;
 exports.getPath = getPath;
 exports.getStyleValue = getStyleValue;
+exports.getStyleValue2 = getStyleValue2;
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
 var _breakpoints = require("../breakpoints");
-function getPath(obj, path, checkVars = true) {
-  if (!path || typeof path !== 'string') {
-    return null;
+/**
+ * TODO(v7): Keep either this one or `getStyleValue2`
+ */
+function getStyleValue(themeMapping, transform, valueFinal, userValue = valueFinal) {
+  let value;
+  if (typeof themeMapping === 'function') {
+    value = themeMapping(valueFinal);
+  } else if (Array.isArray(themeMapping)) {
+    value = themeMapping[valueFinal] || userValue;
+  } else if (typeof valueFinal === 'string') {
+    value = getPath(themeMapping, valueFinal) || userValue;
+  } else {
+    value = userValue;
   }
-
-  // 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;
-    }
+  if (transform) {
+    value = transform(value, userValue, themeMapping);
   }
-  return path.split('.').reduce((acc, item) => {
-    if (acc && acc[item] != null) {
-      return acc[item];
-    }
-    return null;
-  }, obj);
+  return value;
 }
-function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+
+/**
+ * HACK: The `alternateProp` logic is there because our theme looks like this:
+ * {
+ *   typography: {
+ *     fontFamily: 'comic sans',
+ *     fontFamilyCode: 'courrier new',
+ *   }
+ * }
+ * And we support targetting:
+ * - `typography.fontFamily`     with `sx={{ fontFamily: 'default' }}`
+ * - `typography.fontFamilyCode` with `sx={{ fontFamily: 'code' }}`
+ *
+ * TODO(v7): Refactor our theme to look like this and remove the horrendous logic:
+ * {
+ *   typography: {
+ *     fontFamily: {
+ *       default: 'comic sans',
+ *       code: 'courrier new',
+ *     }
+ *   }
+ * }
+ */
+function getStyleValue2(themeMapping, transform, userValue, alternateProp) {
   let value;
   if (typeof themeMapping === 'function') {
-    value = themeMapping(propValueFinal);
+    value = themeMapping(userValue);
   } else if (Array.isArray(themeMapping)) {
-    value = themeMapping[propValueFinal] || userValue;
+    value = themeMapping[userValue] || userValue;
+  } else if (typeof userValue === 'string') {
+    value = getPath(themeMapping, userValue, true, alternateProp) || userValue;
   } else {
-    value = getPath(themeMapping, propValueFinal) || userValue;
+    value = userValue;
   }
   if (transform) {
     value = transform(value, userValue, themeMapping);
   }
   return value;
 }
+function getPath(obj, pathInput, checkVars = true, alternateProp = undefined) {
+  if (!obj || !pathInput) {
+    return null;
+  }
+  const path = pathInput.split('.');
+
+  // Check if CSS variables are used
+  if (obj.vars && checkVars) {
+    const val = getPathImpl(obj.vars, path, alternateProp);
+    if (val != null) {
+      return val;
+    }
+  }
+  return getPathImpl(obj, path, alternateProp);
+}
+function getPathImpl(object, path, alternateProp = undefined) {
+  let lastResult = undefined;
+  let result = object;
+  let index = 0;
+  while (index < path.length) {
+    if (result === null || result === undefined) {
+      return result;
+    }
+    lastResult = result;
+    result = result[path[index]];
+    index += 1;
+  }
+  if (alternateProp && result === undefined) {
+    const lastKey = path[path.length - 1];
+    const alternateKey = `${alternateProp}${lastKey === 'default' ? '' : (0, _capitalize.default)(lastKey)}`;
+    return lastResult?.[alternateKey];
+  }
+  return result;
+}
 function style(options) {
   const {
     prop,
@@ -51,7 +111,6 @@ function style(options) {
     transform
   } = options;
 
-  // false positive
   // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     if (props[prop] == null) {
@@ -60,16 +119,9 @@ function style(options) {
     const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
-    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' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
+    const styleFromPropValue = valueFinal => {
+      const value = getStyleValue2(themeMapping, transform, valueFinal, prop);
+      return cssProperty === false ? value : {
         [cssProperty]: value
       };
     };
@@ -80,5 +132,4 @@ function style(options) {
   } : {};
   fn.filterProps = [prop];
   return fn;
-}
-var _default = exports.default = style;
+}