@instructure/emotion 11.6.0 → 11.6.1-snapshot-129

package/es/getTheme.js

@@ -44,7 +44,7 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   // we need to clone the ancestor theme not to override it
   let currentTheme;
   if (Object.keys(ancestorTheme).length === 0) {
-    if (process.env.NODE_ENV !== 'production') {}
+    if (process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') {}
     currentTheme = canvas;
   } else {
     currentTheme = ancestorTheme;
@@ -62,7 +62,7 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
     // If the prop passed is not an Object, it will throw an error.
     // We are using this fail-safe here for the non-TS users,
     // because the whole page can break without a theme.
-    if (process.env.NODE_ENV !== 'production') {}
+    if (process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') {}
     resolvedThemeOrOverride = {};
   }
   const themeName = currentTheme.key;

package/es/index.js

@@ -25,7 +25,10 @@
 
 export * from '@emotion/react';
 export { InstUISettingsProvider } from "./InstUISettingsProvider/index.js";
+export { withStyleLegacy } from "./withStyleLegacy.js";
+export { getComponentThemeOverride } from "./getComponentThemeOverride.js";
 export { withStyle } from "./withStyle.js";
-export { ThemeablePropValues, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges, mapSpacingToShorthand } from "./styleUtils/index.js";
+export { ThemeablePropValues, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges, calcSpacingFromShorthand, calcFocusOutlineStyles } from "./styleUtils/index.js";
+export { useStyleLegacy } from "./useStyleLegacy.js";
 export { useStyle } from "./useStyle.js";
 export { useTheme } from "./useTheme.js";

package/es/styleUtils/calcFocusOutlineStyles.js

@@ -0,0 +1,71 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { alpha } from '@instructure/ui-color-utils';
+/**
+ * This function creates CSS-in-JS styles for focus indicators.
+ *
+ * @returns CSS-in-JS style object containing focus outline styles ready for use with emotion or similar libraries.
+ */
+const calcFocusOutlineStyles = (theme, params) => {
+  var _params$focusColor, _params$focusPosition, _params$shouldAnimate, _params$focusWithin, _params$withFocusOutl, _params$customCSSSele;
+  const focusColor = (_params$focusColor = params === null || params === void 0 ? void 0 : params.focusColor) !== null && _params$focusColor !== void 0 ? _params$focusColor : 'info';
+  const focusPosition = (_params$focusPosition = params === null || params === void 0 ? void 0 : params.focusPosition) !== null && _params$focusPosition !== void 0 ? _params$focusPosition : 'offset';
+  const shouldAnimateFocus = (_params$shouldAnimate = params === null || params === void 0 ? void 0 : params.shouldAnimateFocus) !== null && _params$shouldAnimate !== void 0 ? _params$shouldAnimate : true;
+  const focusWithin = (_params$focusWithin = params === null || params === void 0 ? void 0 : params.focusWithin) !== null && _params$focusWithin !== void 0 ? _params$focusWithin : false;
+  const withFocusOutline = (_params$withFocusOutl = params === null || params === void 0 ? void 0 : params.withFocusOutline) !== null && _params$withFocusOutl !== void 0 ? _params$withFocusOutl : false;
+  const selector = (_params$customCSSSele = params === null || params === void 0 ? void 0 : params.customCSSSelector) !== null && _params$customCSSSele !== void 0 ? _params$customCSSSele : '&:focus';
+  const focusColorVariants = {
+    info: theme.infoColor,
+    inverse: theme.onColor,
+    success: theme.successColor,
+    danger: theme.dangerColor
+  };
+  const outlineStyle = {
+    outlineColor: focusColorVariants[focusColor],
+    outlineStyle: 'solid',
+    outlineWidth: theme.width,
+    outlineOffset: theme[focusPosition]
+  };
+  return {
+    ...(shouldAnimateFocus && {
+      transition: 'outline-color 0.2s, outline-offset 0.25s'
+    }),
+    outlineOffset: '-0.8rem',
+    outlineStyle: 'solid',
+    outlineColor: alpha(outlineStyle.outlineColor, 0),
+    ...(withFocusOutline && outlineStyle),
+    [selector]: {
+      ...outlineStyle,
+      '&:hover, &:active': {
+        // apply the same style so it's not overridden by some global style
+        ...outlineStyle
+      }
+    },
+    ...(focusWithin && {
+      '&:focus-within': outlineStyle
+    })
+  };
+};
+export default calcFocusOutlineStyles;
+export { calcFocusOutlineStyles };

package/es/styleUtils/calcSpacingFromShorthand.js

@@ -0,0 +1,112 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Converts hyphen-case strings to camelCase
+ * Example: 'medium-small' -> 'mediumSmall'
+ */
+function camelize(str) {
+  return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+}
+
+/**
+ * Converts shorthand spacing values into CSS strings using theme spacing tokens.
+ *
+ * This function parses space-separated spacing values (margin, padding) and resolves theme
+ * tokens to their actual CSS values. It supports CSS shorthand syntax (1-4 values), nested
+ * theme token paths using dot notation, and automatically converts hyphen-case tokens to camelCase.
+ *
+ * @param {Spacing | undefined} value - The shorthand spacing value string containing space-separated tokens or CSS values.
+ *   Tokens can be in camelCase (mediumSmall) or hyphen-case (medium-small).
+ *   Can be undefined, in which case '0' is returned.
+ * @param {Record<string, string>} spacingMap - The spacing theme object containing spacing tokens and nested values.
+ *   Typically comes from `sharedTokens.margin.spacing` or `sharedTokens.padding.spacing` in the component theme.
+ *
+ * @returns {string} The resolved CSS spacing string ready to be used in styles.
+ *
+ * @example
+ * // Hyphen-case tokens are converted to camelCase
+ * calcSpacingFromShorthand('medium-small', spacingMap) // resolves to spacingMap.mediumSmall
+ * calcSpacingFromShorthand('x-large small', spacingMap) // resolves to spacingMap.xLarge + spacingMap.small
+ *
+ * // Dot notation paths are NOT converted
+ * calcSpacingFromShorthand('gap.nested-value', spacingMap) // resolves to spacingMap.gap['nested-value']
+ *
+ * // CSS values like 'none', 'auto', '10px' are returned as-is
+ * calcSpacingFromShorthand('none', spacingMap) // returns 'none'
+ */
+export function calcSpacingFromShorthand(value, spacingMap) {
+  // return undefined when there is no value -> this is important when a component (like View)
+  // doesn't have a prop like `padding` but has inline css for padding
+  // this makes sure to not overwrite the inline style
+  if (!value) return;
+  const tokens = value.trim().split(' ');
+
+  // Handle whitespace-only strings
+  if (tokens.length === 1 && tokens[0] === '') return '';
+
+  // Map each token to its resolved CSS value
+  const resolvedValues = tokens.map(token => {
+    // Handle special CSS value 'none' - convert to 0 for valid CSS
+    if (token === 'none') {
+      return '0';
+    }
+
+    // Handle valid CSS numeric and keyword values
+    if (token === '0' || token === 'auto') {
+      return token;
+    }
+
+    // Handle dot notation for nested theme token paths (no camelization)
+    if (token.includes('.')) {
+      const path = token.split('.');
+      let currentLevel = spacingMap;
+      for (const key of path) {
+        if (currentLevel && typeof currentLevel === 'object' && key in currentLevel) {
+          currentLevel = currentLevel[key];
+        } else {
+          // If path doesn't resolve, return the original token as fallback
+          return token;
+        }
+      }
+      if (typeof currentLevel === 'string') {
+        return currentLevel;
+      }
+    }
+
+    // For direct tokens, try camelized version
+    const camelizedToken = camelize(token);
+    const directValue = spacingMap[camelizedToken];
+    if (typeof directValue === 'string') {
+      return directValue;
+    }
+
+    // Return the original token if not found (could be a direct CSS value like 'auto', '10px', etc.)
+
+    return token;
+  });
+
+  // Return the space-separated resolved values
+  return resolvedValues.join(' ');
+}

package/es/styleUtils/index.js

@@ -26,4 +26,5 @@ export { makeThemeVars } from "./makeThemeVars.js";
 export { getShorthandPropValue } from "./getShorthandPropValue.js";
 export { mirrorShorthandCorners } from "./mirrorShorthandCorners.js";
 export { mirrorShorthandEdges } from "./mirrorShorthandEdges.js";
-export { mapSpacingToShorthand } from "./mapSpacingToShorthand.js";
+export { calcSpacingFromShorthand } from "./calcSpacingFromShorthand.js";
+export { calcFocusOutlineStyles } from "./calcFocusOutlineStyles.js";

package/es/useStyle.js

@@ -23,20 +23,41 @@
  */
 import { useTheme } from "./useTheme.js";
 import { getComponentThemeOverride } from "./getComponentThemeOverride.js"; // returns the second parameter of a function
+/**
+ * Type for a theme override
+ */
+const isNewThemeObject = obj => {
+  return typeof (obj === null || obj === void 0 ? void 0 : obj.newTheme) === 'object';
+};
+
+/**
+ * new useStyle syntax, use this with v12 themes
+ */
+
+// TODO: improve useStyle to handle generateStyle functions that don't
+// have a theme.
 const useStyle = useStyleParams => {
+  var _ref, _ref2;
   const generateStyle = useStyleParams.generateStyle,
-    generateComponentTheme = useStyleParams.generateComponentTheme,
     params = useStyleParams.params,
     componentId = useStyleParams.componentId,
-    displayName = useStyleParams.displayName;
+    displayName = useStyleParams.displayName,
+    themeOverride = useStyleParams.themeOverride;
+  const useTokensFrom = useStyleParams.useTokensFrom;
   const theme = useTheme();
-  const baseComponentTheme = generateComponentTheme ? generateComponentTheme(theme) : {};
-  const themeOverride = getComponentThemeOverride(theme, displayName ? displayName : componentId || '', componentId, params, baseComponentTheme);
+  let baseComponentTheme = {};
+  const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
+  if (isNewThemeObject(theme) &&
+  // TODO: is it possible not to have a theme object here?
+  theme.newTheme.components[componentWithTokensId]) {
+    baseComponentTheme = theme.newTheme.components[componentWithTokensId];
+  }
+  const finalOverride = getComponentThemeOverride(theme, (_ref = (_ref2 = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : displayName) !== null && _ref2 !== void 0 ? _ref2 : componentId) !== null && _ref !== void 0 ? _ref : '', componentWithTokensId, themeOverride, baseComponentTheme);
   const componentTheme = {
     ...baseComponentTheme,
-    ...themeOverride
+    ...finalOverride
   };
-  return generateStyle(componentTheme, params ? params : {});
+  return generateStyle(componentTheme, params, theme.newTheme.sharedTokens);
 };
 export default useStyle;
 export { useStyle };

package/es/useStyleLegacy.js

@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { useTheme } from "./useTheme.js";
+import { getComponentThemeOverride } from "./getComponentThemeOverride.js"; // returns the second parameter of a function
+// TODO this is only used by the old themes, remove when everything uses the new
+// theming system
+/*
+ * This is only used by the **old themes**, remove when everything uses the new
+ * theming system (InstUI v12)
+ */
+const useStyleLegacy = useStyleParams => {
+  var _ref;
+  const generateStyle = useStyleParams.generateStyle,
+    params = useStyleParams.params,
+    componentId = useStyleParams.componentId,
+    displayName = useStyleParams.displayName;
+  const generateComponentTheme = useStyleParams === null || useStyleParams === void 0 ? void 0 : useStyleParams.generateComponentTheme;
+  const theme = useTheme();
+  const baseComponentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
+  const themeOverride = getComponentThemeOverride(theme, (_ref = displayName !== null && displayName !== void 0 ? displayName : componentId) !== null && _ref !== void 0 ? _ref : '', componentId, params === null || params === void 0 ? void 0 : params.themeOverride, baseComponentTheme);
+  const componentTheme = {
+    ...baseComponentTheme,
+    ...themeOverride
+  };
+  return generateStyle(componentTheme, params ? params : {}, theme);
+};
+export default useStyleLegacy;
+export { useStyleLegacy };

package/es/useTheme.js

@@ -37,7 +37,7 @@ const useTheme = () => {
   // This reads the theme from Emotion's ThemeContext
   let theme = useEmotionTheme();
   if (isEmpty(theme)) {
-    if (process.env.NODE_ENV !== 'production') {}
+    if (process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') {}
     theme = canvas;
   }
   return theme;

package/es/withStyle.js

@@ -52,9 +52,8 @@ const defaultValues = {
  * ```js-code
  * import { withStyle } from '@instructure/emotion'
  * import generateStyle from './styles'
- * import generateComponentTheme from './theme'
  *
- * export default withStyle(generateStyle, generateComponentTheme)(ExampleComponent)
+ * export default withStyle(generateStyle)(ExampleComponent)
  * ```
  *
  * Themeable components inject their themed styles into the document
@@ -73,24 +72,6 @@ const defaultValues = {
  *
  * See more about the overrides on the [Using theme overrides](/#using-theme-overrides) docs page.
  *
- * ```js-code
- * // ExampleComponent/theme.js
- * const generateComponentTheme = (theme) => {
- *   const { colors } = theme
- *
- *   const componentVariables = {
- *     background: colors?.backgroundMedium,
- *     color: colors?.textDarkest,
- *
- *     hoverColor: colors?.textLightest,
- *     hoverBackground: colors?.backgroundDarkest
- *   }
- *
- *   return componentVariables
- * }
- * export default generateComponentTheme
- * ```
- *
  * ```jsx-code
  * {// global theme override}
  * <InstUISettingsProvider theme={{
@@ -110,11 +91,12 @@ const defaultValues = {
  * @module withStyle
  *
  * @param {function} generateStyle - The function that returns the component's style object
- * @param {function} generateComponentTheme - The function that returns the component's theme variables object
  * @returns {ReactElement} The decorated WithStyle Component
  */
-const withStyle = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {
+const withStyle = decorator((ComposedComponent, generateStyle, useTokensFrom) => {
+  var _ComposedComponent$co;
   const displayName = ComposedComponent.displayName || ComposedComponent.name;
+  const componentId = (_ComposedComponent$co = ComposedComponent.componentId) === null || _ComposedComponent$co === void 0 ? void 0 : _ComposedComponent$co.replace('.', '');
   const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
     const theme = useTheme();
     if (props.styles) {
@@ -128,18 +110,21 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
       ...props,
       ...defaultValues
     };
-    let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
-    const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps, componentTheme);
-    componentTheme = {
-      ...componentTheme,
+    const componentWithTokensId = useTokensFrom !== null && useTokensFrom !== void 0 ? useTokensFrom : componentId;
+    const baseComponentTheme = theme.newTheme.components[componentWithTokensId];
+    const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps.themeOverride, baseComponentTheme);
+    const componentTheme = {
+      ...baseComponentTheme,
       ...themeOverride
     };
-    const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
+
+    // TODO do not call here generateStyle, it does not receive the extraArgs
+    const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, {}) : {}),
       _useState2 = _slicedToArray(_useState, 2),
       styles = _useState2[0],
       setStyles = _useState2[1];
     const makeStyleHandler = extraArgs => {
-      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
+      const calculatedStyles = generateStyle(componentTheme, componentProps, theme.newTheme.sharedTokens, extraArgs);
       if (!isEqual(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
       }
@@ -165,9 +150,6 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
   // These static fields exist on InstUI components
   WithStyle.allowedProps = ComposedComponent.allowedProps;
 
-  // we are exposing the theme generator for the docs generation
-  WithStyle.generateComponentTheme = generateComponentTheme;
-
   // we have to add defaults to makeStyles and styles added by this decorator
   // eslint-disable-next-line no-param-reassign
   ComposedComponent.defaultProps = {

package/es/withStyleLegacy.js

@@ -0,0 +1,116 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { forwardRef, useState } from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { deepEqual as isEqual } from '@instructure/ui-utils';
+import { warn } from '@instructure/console';
+import { decorator } from '@instructure/ui-decorator';
+import { getComponentThemeOverride } from "./getComponentThemeOverride.js";
+import { useTheme } from "./useTheme.js"; // Extract is needed because it would allow number otherwise
+// https://stackoverflow.com/a/51808262/319473
+// Unique name of an InstUI component
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const defaultValues = {
+  styles: {},
+  makeStyles: () => {}
+};
+
+/**
+ * ---
+ * category: utilities/themes
+ * ---
+ * used for old (v11 and eariler) theming system
+ * TODO delete when the theme migration is complete
+ */
+const withStyleLegacy = decorator((ComposedComponent, generateStyle, generateComponentTheme) => {
+  const displayName = ComposedComponent.displayName || ComposedComponent.name;
+  const WithStyle = /*#__PURE__*/forwardRef((props, ref) => {
+    const theme = useTheme();
+    if (props.styles) {
+      warn(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
+    }
+    if (props.makeStyles) {
+      warn(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
+    }
+    const componentProps = {
+      ...ComposedComponent.defaultProps,
+      ...props,
+      ...defaultValues
+    };
+    let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
+    const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps.themeOverride, componentTheme);
+    componentTheme = {
+      ...componentTheme,
+      ...themeOverride
+    };
+    const _useState = useState(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
+      _useState2 = _slicedToArray(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+    const makeStyleHandler = extraArgs => {
+      const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
+      if (!isEqual(calculatedStyles, styles)) {
+        setStyles(calculatedStyles);
+      }
+    };
+    return _jsx(ComposedComponent, {
+      ref: ref,
+      ...props,
+      makeStyles: makeStyleHandler,
+      styles: styles
+      // passing themeOverrides is needed for components like Button
+      // that have no makeStyles of their own and only pass themeOverrides
+      // to the underlying component (e.g.: BaseButton)
+      ,
+      themeOverride: themeOverride
+    });
+  });
+  hoistNonReactStatics(WithStyle, ComposedComponent);
+
+  // added so it can be tested with ReactTestUtils
+  // more info: https://github.com/facebook/react/issues/13455
+  WithStyle.originalType = ComposedComponent.originalType || ComposedComponent;
+  WithStyle.defaultProps = ComposedComponent.defaultProps;
+  // These static fields exist on InstUI components
+  WithStyle.allowedProps = ComposedComponent.allowedProps;
+
+  // we are exposing the theme generator for the docs generation
+  WithStyle.generateComponentTheme = generateComponentTheme;
+
+  // we have to add defaults to makeStyles and styles added by this decorator
+  // eslint-disable-next-line no-param-reassign
+  ComposedComponent.defaultProps = {
+    ...ComposedComponent.defaultProps,
+    makeStyles: defaultValues.makeStyles,
+    styles: defaultValues.styles
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    WithStyle.displayName = `WithStyle(${displayName})`;
+  }
+  return WithStyle;
+});
+export default withStyleLegacy;
+export { withStyleLegacy };

package/lib/InstUISettingsProvider/index.js

@@ -48,7 +48,7 @@ function InstUISettingsProvider({
   instanceCounterMap
 }) {
   const finalDir = dir || (0, _react.useContext)(_TextDirectionContext.TextDirectionContext);
-  if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {}
+  if ((process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') && finalDir === 'auto') {}
   let providers = (0, _jsxRuntime.jsx)(_DeterministicIdContextProvider.DeterministicIdContextProvider, {
     instanceCounterMap: instanceCounterMap,
     children: (0, _jsxRuntime.jsx)(_react2.ThemeProvider, {

package/lib/getComponentThemeOverride.js

@@ -38,14 +38,13 @@ exports.getComponentThemeOverride = exports.default = void 0;
  * @param theme - Theme object
  * @param displayName - Name of the component
  * @param componentId - componentId of the component
- * @param props - The component's props object
+ * @param themeOverride - The theme override object
  * @param componentTheme - The component's default theme
  * @returns The calculated theme override object
  */
-const getComponentThemeOverride = (theme, displayName, componentId, props, componentTheme) => {
+const getComponentThemeOverride = (theme, displayName, componentId, themeOverride, componentTheme) => {
   const name = displayName;
   const id = componentId;
-  const themeOverride = props ? props.themeOverride : void 0;
   const _ref = theme,
     componentOverrides = _ref.componentOverrides;
   let overridesFromTheme = {};
@@ -55,7 +54,9 @@ const getComponentThemeOverride = (theme, displayName, componentId, props, compo
   }
   if (themeOverride) {
     if (typeof themeOverride === 'function') {
-      overrideFromComponent = themeOverride(componentTheme || {},
+      overrideFromComponent = themeOverride(
+      //TODO type properly when the old theme is gone
+      componentTheme || {},
       // the `theme` technically could be a partial theme / override object too,
       // but we want to display all possible options
       theme);

package/lib/getTheme.js

@@ -53,7 +53,7 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   // we need to clone the ancestor theme not to override it
   let currentTheme;
   if (Object.keys(ancestorTheme).length === 0) {
-    if (process.env.NODE_ENV !== 'production') {}
+    if (process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') {}
     currentTheme = _uiThemes.default;
   } else {
     currentTheme = ancestorTheme;
@@ -71,7 +71,7 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
     // If the prop passed is not an Object, it will throw an error.
     // We are using this fail-safe here for the non-TS users,
     // because the whole page can break without a theme.
-    if (process.env.NODE_ENV !== 'production') {}
+    if (process.env.NODE_ENV !== 'production' || process.env.GITHUB_PULL_REQUEST_PREVIEW === 'true') {}
     resolvedThemeOrOverride = {};
   }
   const themeName = currentTheme.key;