@instructure/emotion 8.9.2-snapshot.7 → 8.9.2-snapshot.9

package/es/EmotionThemeProvider/index.js

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 import React from 'react';
-import { ThemeProvider } from '@emotion/react';
 import { merge, cloneDeep } from 'lodash';
+import { ThemeProvider } from '@emotion/react';
 
 /**
  * ---
@@ -90,7 +90,7 @@ function EmotionThemeProvider({
 
 
 const getTheme = themeOrOverride => (ancestorTheme = {}) => {
-  var _themeOrOverride$them;
+  var _themeOverrides;
 
   if (isBaseTheme(themeOrOverride)) {
     return themeOrOverride;
@@ -100,7 +100,7 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   const currentTheme = cloneDeep(ancestorTheme);
   const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
 
-  const currentThemeOverrides = (themeOrOverride === null || themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || {};
+  const currentThemeOverrides = (themeOrOverride === null || themeOrOverride === void 0 ? void 0 : (_themeOverrides = themeOrOverride.themeOverrides) === null || _themeOverrides === void 0 ? void 0 : _themeOverrides[themeName]) || {};
   return merge({}, currentTheme, merge({}, themeOrOverride, currentThemeOverrides));
 }; // themeable themes have a 'key' property (= name of the theme),
 // so without it it's just an overrides objects

package/es/EmotionTypes.js

@@ -0,0 +1 @@
+export {};

package/es/getComponentThemeOverride.js

@@ -30,15 +30,27 @@
  * based on every possible override there is.
 
  * @param {object} theme - Theme object
- * @param {*} componentName - Name of the component
+ * @param {*} displayName - Name of the component
+ * @param {*} componentId - componentId of the component
  * @param {*} props - The component's props object
  * @returns {object} The calculated theme override object
  */
-export const getComponentThemeOverride = (theme, componentName, props) => {
+const getComponentThemeOverride = (theme, displayName, componentId, props) => {
   var _props$themeOverride;
 
-  const componentOverride = (theme === null || theme === void 0 ? void 0 : theme.componentOverrides) && (theme.componentOverrides[componentName[0]] || theme.componentOverrides[componentName[1]]);
+  let componentOverride = {};
+  const overrides = theme.componentOverrides;
+  const name = displayName;
+  const id = componentId;
+
+  if (overrides) {
+    componentOverride = name && overrides[name] || id && overrides[id] || {};
+  }
+
   return { ...componentOverride,
     ...((_props$themeOverride = props === null || props === void 0 ? void 0 : props.themeOverride) !== null && _props$themeOverride !== void 0 ? _props$themeOverride : {})
   };
-};
+};
+
+export default getComponentThemeOverride;
+export { getComponentThemeOverride };

package/es/index.js

@@ -24,5 +24,5 @@
 /// <reference types="@emotion/react/types/css-prop" />
 export * from '@emotion/react';
 export { EmotionThemeProvider } from './EmotionThemeProvider';
-export * from './styleUtils';
-export * from './withStyle';
+export { withStyle } from './withStyle';
+export { ThemeablePropValues, ThemeablePropTypes, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges } from './styleUtils';

package/es/styleUtils/ThemeablePropTypes.js

@@ -53,13 +53,11 @@ function shorthandPropType(validValues) {
     const propValue = props[propName];
 
     if (typeof propValue === 'undefined') {
-      return;
+      return null;
     }
 
-    const propValueType = typeof propValue;
-
-    if (propValueType !== 'string') {
-      return new Error(`Invalid ${location} \`${propName}\` of type \`${propValueType}\` supplied to \`${componentName}\`, expected ` + `a string.`);
+    if (typeof propValue !== 'string') {
+      return new Error(`Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` + `a string.`);
     }
 
     const propValues = propValue.split(' ');
@@ -76,6 +74,8 @@ function shorthandPropType(validValues) {
     } else {
       return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `between one and four of the following valid values: \`${validValues.join(', ')}\`.`);
     }
+
+    return null;
   };
 }
 

package/es/styleUtils/bidirectionalPolyfill.js

@@ -21,8 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { consoleLog as log } from '@instructure/console';
 import { isObject } from 'lodash';
+import { consoleLog as log } from '@instructure/console';
+
 /**
  * ---
  * category: utilities/themes
@@ -35,7 +36,6 @@ import { isObject } from 'lodash';
  * @param {string} dir - "ltr" of "rtl" direction
  * @returns {{}} styles object with Bi-directional properties polyfilled
  */
-
 const DEBUG = false;
 const SUPPORT_PROPS = ['float', 'clear', 'textAlign', 'paddingInlineStart', 'paddingInlineEnd', 'borderInlineStart', 'borderInlineEnd', 'borderInlineStartColor', 'borderInlineEndColor', 'borderInlineStartStyle', 'borderInlineEndStyle', 'borderInlineStartWidth', 'borderInlineEndWidth', 'borderInlineStartTop', 'borderInlineEndTop', 'borderTopInlineStartRadius', 'borderTopInlineEndRadius', 'borderBottomInlineStartRadius', 'borderBottomInlineEndRadius', 'marginInlineStart', 'marginInlineEnd', 'offsetInlineStart', 'offsetInlineEnd', 'insetInlineStart', 'insetInlineEnd'];
 
@@ -157,7 +157,7 @@ const processStyleProps = (propsObj, dir) => isObject(propsObj) ? Object.entries
     };
   }
 
-  if (isSupportedProps(originalProp) && originalValue !== 'undefined') {
+  if (isSupportedProps(originalProp) && typeof originalValue !== 'undefined') {
     const _processProps = processProps({
       originalProp,
       originalValue
@@ -175,6 +175,9 @@ const processStyleProps = (propsObj, dir) => isObject(propsObj) ? Object.entries
   };
 }, {}) : propsObj;
 
-export const bidirectionalPolyfill = (styles, dir) => Object.entries(styles).reduce((accumulator, [style, props]) => ({ ...accumulator,
+const bidirectionalPolyfill = (styles, dir) => Object.entries(styles).reduce((accumulator, [style, props]) => ({ ...accumulator,
   [style]: processStyleProps(props, dir)
-}), {});
+}), {});
+
+export default bidirectionalPolyfill;
+export { bidirectionalPolyfill };

package/es/useTheme.js

@@ -24,6 +24,7 @@
 import { useTheme as useEmotionTheme } from '@emotion/react';
 import { canvas } from '@instructure/ui-themes';
 import { isEmpty } from '@instructure/ui-utils';
+
 /**
  * ---
  * private: true
@@ -32,8 +33,7 @@ import { isEmpty } from '@instructure/ui-utils';
  * If there is no theme provided to the Context it will return the default `canvas` theme.
  * @returns {object} the theme object
  */
-
-export const useTheme = () => {
+const useTheme = () => {
   let theme = useEmotionTheme(); // TODO type theme properly, then this cast might not be needed.
 
   if (isEmpty(theme)) {
@@ -43,4 +43,7 @@ export const useTheme = () => {
   }
 
   return theme;
-};
+};
+
+export default useTheme;
+export { useTheme };

package/es/withStyle.js

@@ -24,9 +24,9 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * SOFTWARE.
  */
 import React, { forwardRef, useState } from 'react';
-import { decorator } from '@instructure/ui-decorator';
 import { isEqual } from 'lodash';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { decorator } from '@instructure/ui-decorator';
 import { useTextDirectionContext } from '@instructure/ui-i18n';
 import { bidirectionalPolyfill } from './styleUtils/bidirectionalPolyfill';
 import { getComponentThemeOverride } from './getComponentThemeOverride';
@@ -108,7 +108,7 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
     const componentProps = { ...ComposedComponent.defaultProps,
       ...props
     };
-    const themeOverride = getComponentThemeOverride(theme, [displayName, ComposedComponent.componentId], componentProps);
+    const themeOverride = getComponentThemeOverride(theme, displayName, ComposedComponent.componentId, componentProps);
     const componentTheme = typeof generateComponentTheme === 'function' ? { ...generateComponentTheme(theme),
       ...themeOverride
     } : {};
@@ -118,8 +118,8 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
           styles = _useState2[0],
           setStyles = _useState2[1];
 
-    const makeStyleHandler = (...extraArgs) => {
-      const calculatedStyles = bidirectionalPolyfill(generateStyle(componentTheme, componentProps, ...extraArgs), dir);
+    const makeStyleHandler = extraArgs => {
+      const calculatedStyles = bidirectionalPolyfill(generateStyle(componentTheme, componentProps, extraArgs), dir);
 
       if (!isEqual(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
@@ -137,9 +137,10 @@ const withStyle = decorator((ComposedComponent, generateStyle, generateComponent
   // eslint-disable-next-line react/forbid-foreign-prop-types
 
   WithStyle.propTypes = ComposedComponent.propTypes;
-  WithStyle.defaultProps = ComposedComponent.defaultProps;
-  WithStyle.allowedProps = ComposedComponent.allowedProps // we are exposing the theme generator for the docs generation
-  ;
+  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
 

package/lib/EmotionThemeProvider/index.js

@@ -10,10 +10,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _react2 = require("@emotion/react");
-
 var _lodash = require("lodash");
 
+var _react2 = require("@emotion/react");
+
 /*
  * The MIT License (MIT)
  *
@@ -103,7 +103,7 @@ function EmotionThemeProvider({
 
 
 const getTheme = themeOrOverride => (ancestorTheme = {}) => {
-  var _themeOrOverride$them;
+  var _themeOverrides;
 
   if (isBaseTheme(themeOrOverride)) {
     return themeOrOverride;
@@ -113,7 +113,7 @@ const getTheme = themeOrOverride => (ancestorTheme = {}) => {
   const currentTheme = (0, _lodash.cloneDeep)(ancestorTheme);
   const themeName = currentTheme.key; // we pick the overrides for the current theme from the override object
 
-  const currentThemeOverrides = (themeOrOverride === null || themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || {};
+  const currentThemeOverrides = (themeOrOverride === null || themeOrOverride === void 0 ? void 0 : (_themeOverrides = themeOrOverride.themeOverrides) === null || _themeOverrides === void 0 ? void 0 : _themeOverrides[themeName]) || {};
   return (0, _lodash.merge)({}, currentTheme, (0, _lodash.merge)({}, themeOrOverride, currentThemeOverrides));
 }; // themeable themes have a 'key' property (= name of the theme),
 // so without it it's just an overrides objects

package/lib/EmotionTypes.js

@@ -0,0 +1 @@
+"use strict";

package/lib/getComponentThemeOverride.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getComponentThemeOverride = void 0;
+exports.getComponentThemeOverride = exports.default = void 0;
 
 /*
  * The MIT License (MIT)
@@ -37,17 +37,28 @@ exports.getComponentThemeOverride = void 0;
  * based on every possible override there is.
 
  * @param {object} theme - Theme object
- * @param {*} componentName - Name of the component
+ * @param {*} displayName - Name of the component
+ * @param {*} componentId - componentId of the component
  * @param {*} props - The component's props object
  * @returns {object} The calculated theme override object
  */
-const getComponentThemeOverride = (theme, componentName, props) => {
+const getComponentThemeOverride = (theme, displayName, componentId, props) => {
   var _props$themeOverride;
 
-  const componentOverride = (theme === null || theme === void 0 ? void 0 : theme.componentOverrides) && (theme.componentOverrides[componentName[0]] || theme.componentOverrides[componentName[1]]);
+  let componentOverride = {};
+  const overrides = theme.componentOverrides;
+  const name = displayName;
+  const id = componentId;
+
+  if (overrides) {
+    componentOverride = name && overrides[name] || id && overrides[id] || {};
+  }
+
   return { ...componentOverride,
     ...((_props$themeOverride = props === null || props === void 0 ? void 0 : props.themeOverride) !== null && _props$themeOverride !== void 0 ? _props$themeOverride : {})
   };
 };
 
-exports.getComponentThemeOverride = getComponentThemeOverride;
+exports.getComponentThemeOverride = getComponentThemeOverride;
+var _default = getComponentThemeOverride;
+exports.default = _default;

package/lib/index.js

@@ -4,7 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  EmotionThemeProvider: true
+  EmotionThemeProvider: true,
+  withStyle: true,
+  ThemeablePropValues: true,
+  ThemeablePropTypes: true,
+  makeThemeVars: true,
+  getShorthandPropValue: true,
+  mirrorShorthandCorners: true,
+  mirrorShorthandEdges: true
 };
 Object.defineProperty(exports, "EmotionThemeProvider", {
   enumerable: true,
@@ -12,6 +19,48 @@ Object.defineProperty(exports, "EmotionThemeProvider", {
     return _EmotionThemeProvider.EmotionThemeProvider;
   }
 });
+Object.defineProperty(exports, "withStyle", {
+  enumerable: true,
+  get: function () {
+    return _withStyle.withStyle;
+  }
+});
+Object.defineProperty(exports, "ThemeablePropValues", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.ThemeablePropValues;
+  }
+});
+Object.defineProperty(exports, "ThemeablePropTypes", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.ThemeablePropTypes;
+  }
+});
+Object.defineProperty(exports, "makeThemeVars", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.makeThemeVars;
+  }
+});
+Object.defineProperty(exports, "getShorthandPropValue", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.getShorthandPropValue;
+  }
+});
+Object.defineProperty(exports, "mirrorShorthandCorners", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.mirrorShorthandCorners;
+  }
+});
+Object.defineProperty(exports, "mirrorShorthandEdges", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.mirrorShorthandEdges;
+  }
+});
 
 var _react = require("@emotion/react");
 
@@ -29,30 +78,6 @@ Object.keys(_react).forEach(function (key) {
 
 var _EmotionThemeProvider = require("./EmotionThemeProvider");
 
-var _styleUtils = require("./styleUtils");
-
-Object.keys(_styleUtils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _styleUtils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _styleUtils[key];
-    }
-  });
-});
-
 var _withStyle = require("./withStyle");
 
-Object.keys(_withStyle).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _withStyle[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _withStyle[key];
-    }
-  });
-});
+var _styleUtils = require("./styleUtils");

package/lib/styleUtils/ThemeablePropTypes.js

@@ -66,13 +66,11 @@ function shorthandPropType(validValues) {
     const propValue = props[propName];
 
     if (typeof propValue === 'undefined') {
-      return;
+      return null;
     }
 
-    const propValueType = typeof propValue;
-
-    if (propValueType !== 'string') {
-      return new Error(`Invalid ${location} \`${propName}\` of type \`${propValueType}\` supplied to \`${componentName}\`, expected ` + `a string.`);
+    if (typeof propValue !== 'string') {
+      return new Error(`Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` + `a string.`);
     }
 
     const propValues = propValue.split(' ');
@@ -89,6 +87,8 @@ function shorthandPropType(validValues) {
     } else {
       return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `between one and four of the following valid values: \`${validValues.join(', ')}\`.`);
     }
+
+    return null;
   };
 }
 

package/lib/styleUtils/bidirectionalPolyfill.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.bidirectionalPolyfill = void 0;
-
-var _console = require("@instructure/console");
+exports.bidirectionalPolyfill = exports.default = void 0;
 
 var _lodash = require("lodash");
 
+var _console = require("@instructure/console");
+
 /*
  * The MIT License (MIT)
  *
@@ -166,7 +166,7 @@ const processStyleProps = (propsObj, dir) => (0, _lodash.isObject)(propsObj) ? O
     };
   }
 
-  if (isSupportedProps(originalProp) && originalValue !== 'undefined') {
+  if (isSupportedProps(originalProp) && typeof originalValue !== 'undefined') {
     const _processProps = processProps({
       originalProp,
       originalValue
@@ -188,4 +188,6 @@ const bidirectionalPolyfill = (styles, dir) => Object.entries(styles).reduce((ac
   [style]: processStyleProps(props, dir)
 }), {});
 
-exports.bidirectionalPolyfill = bidirectionalPolyfill;
+exports.bidirectionalPolyfill = bidirectionalPolyfill;
+var _default = bidirectionalPolyfill;
+exports.default = _default;

package/lib/useTheme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTheme = void 0;
+exports.useTheme = exports.default = void 0;
 
 var _react = require("@emotion/react");
 
@@ -55,4 +55,6 @@ const useTheme = () => {
   return theme;
 };
 
-exports.useTheme = useTheme;
+exports.useTheme = useTheme;
+var _default = useTheme;
+exports.default = _default;

package/lib/withStyle.js

@@ -13,12 +13,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
-
 var _lodash = require("lodash");
 
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
+var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
+
 var _uiI18n = require("@instructure/ui-i18n");
 
 var _bidirectionalPolyfill = require("./styleUtils/bidirectionalPolyfill");
@@ -127,7 +127,7 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
     const componentProps = { ...ComposedComponent.defaultProps,
       ...props
     };
-    const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, [displayName, ComposedComponent.componentId], componentProps);
+    const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps);
     const componentTheme = typeof generateComponentTheme === 'function' ? { ...generateComponentTheme(theme),
       ...themeOverride
     } : {};
@@ -137,8 +137,8 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
           styles = _useState2[0],
           setStyles = _useState2[1];
 
-    const makeStyleHandler = (...extraArgs) => {
-      const calculatedStyles = (0, _bidirectionalPolyfill.bidirectionalPolyfill)(generateStyle(componentTheme, componentProps, ...extraArgs), dir);
+    const makeStyleHandler = extraArgs => {
+      const calculatedStyles = (0, _bidirectionalPolyfill.bidirectionalPolyfill)(generateStyle(componentTheme, componentProps, extraArgs), dir);
 
       if (!(0, _lodash.isEqual)(calculatedStyles, styles)) {
         setStyles(calculatedStyles);
@@ -156,9 +156,10 @@ const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, g
   // eslint-disable-next-line react/forbid-foreign-prop-types
 
   WithStyle.propTypes = ComposedComponent.propTypes;
-  WithStyle.defaultProps = ComposedComponent.defaultProps;
-  WithStyle.allowedProps = ComposedComponent.allowedProps // we are exposing the theme generator for the docs generation
-  ;
+  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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/emotion",
-  "version": "8.9.2-snapshot.7+1a56581cd",
+  "version": "8.9.2-snapshot.9+e92f12dda",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -26,20 +26,20 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/react": "^11.4.1",
-    "@instructure/console": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/shared-types": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-decorator": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-i18n": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-themes": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-utils": "8.9.2-snapshot.7+1a56581cd",
+    "@instructure/console": "8.9.2-snapshot.9+e92f12dda",
+    "@instructure/shared-types": "8.9.2-snapshot.9+e92f12dda",
+    "@instructure/ui-decorator": "8.9.2-snapshot.9+e92f12dda",
+    "@instructure/ui-i18n": "8.9.2-snapshot.9+e92f12dda",
+    "@instructure/ui-themes": "8.9.2-snapshot.9+e92f12dda",
+    "@instructure/ui-utils": "8.9.2-snapshot.9+e92f12dda",
     "emotion-theming": "^10.0.27",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.7+1a56581cd",
+    "@instructure/ui-babel-preset": "8.9.2-snapshot.9+e92f12dda",
+    "@instructure/ui-test-utils": "8.9.2-snapshot.9+e92f12dda",
     "@types/lodash": "^4.14.171",
     "cpy-cli": "^3.1.1"
   },
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "1a56581cde6bd3b4f9fe5cd11ae420bd1222fe15"
+  "gitHead": "e92f12dda2e003c834e8728072d6ab60e4212c89"
 }

package/src/EmotionThemeProvider/index.tsx

@@ -21,31 +21,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react'
-import { ThemeProvider } from '@emotion/react'
 import { merge, cloneDeep } from 'lodash'
-import {
-  ComponentThemeMap,
-  DeepPartial,
-  BaseTheme
-} from '@instructure/shared-types'
-
-type PartialTheme = DeepPartial<Omit<BaseTheme, 'key'>>
-type ComponentOverride =
-  | DeepPartial<ComponentThemeMap>
-  // this is needed for user defined components which we can't possibly type
-  | { [otherComponent: string]: Record<string, unknown> }
 
-type ThemeOverride =
-  | PartialTheme
-  | { [key: string]: PartialTheme | { componentOverrides?: ComponentOverride } }
+import { ThemeProvider } from '@emotion/react'
 
-type Overrides = {
-  themeOverrides?: ThemeOverride
-  componentOverrides?: ComponentOverride
-}
+import type { BaseTheme } from '@instructure/shared-types'
+import type {
+  Overrides,
+  ThemeOrOverride,
+  SpecificThemeOverride
+} from '../EmotionTypes'
 
-type ThemeOrOverride = BaseTheme | PartialTheme | Overrides
 type ThemeProviderProps = {
   theme: ThemeOrOverride
 }
@@ -125,8 +113,9 @@ const getTheme = (themeOrOverride: ThemeOrOverride) => (
 
   // we pick the overrides for the current theme from the override object
   const currentThemeOverrides =
-    //@ts-expect-error TODO: fix this code, this way it is really hard to type
-    themeOrOverride?.themeOverrides?.[themeName] || {}
+    ((themeOrOverride as Overrides)?.themeOverrides as SpecificThemeOverride)?.[
+      themeName
+    ] || {}
 
   return merge(
     {},