@instructure/ui-react-utils 8.53.3-pr-snapshot-8 → 8.53.3-pr-snapshot-1709124298948

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-pr-snapshot-8](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-pr-snapshot-8) (2024-02-23)
+## [8.53.3-pr-snapshot-1709124298948](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-pr-snapshot-1709124298948) (2024-02-28)
 
-**Note:** Version bump only for package @instructure/ui-react-utils
+
+### Bug Fixes
+
+* **many:** remove emotion's jsx pragma ([7435d5c](https://github.com/instructure/instructure-ui/commit/7435d5c31ca6556a1f95c4dfde156d5a76aad7de))
 
 
 

package/es/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -21,8 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react';
+
 import { DeterministicIdContext, defaultDeterministicIDMap } from './DeterministicIdContext';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * ---
  * category: components/utilities
@@ -40,7 +41,7 @@ const DeterministicIdContextProvider = ({
   children,
   instanceCounterMap
 }) => {
-  return /*#__PURE__*/React.createElement(DeterministicIdContext.Provider, {
+  return ___EmotionJSX(DeterministicIdContext.Provider, {
     value: instanceCounterMap
   }, children);
 };

package/es/DeterministicIdContext/withDeterministicId.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 /*
  * The MIT License (MIT)
  *
@@ -27,6 +28,7 @@ import { DeterministicIdContext } from './DeterministicIdContext';
 import { decorator } from '@instructure/ui-decorator';
 import { generateId } from '@instructure/ui-utils';
 import { warn } from '@instructure/console';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * This decorator is used to enable the decorated class to use the `DeterministicIdContext` which is needed
  * for deterministic id generation.
@@ -43,7 +45,7 @@ const withDeterministicId = decorator(ComposedComponent => {
     if (props.deterministicId) {
       warn(false, `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, props.deterministicId);
     }
-    return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
+    return ___EmotionJSX(ComposedComponent, _extends({
       ref: ref,
       deterministicId: deterministicId
     }, props));

package/es/__new-tests__/ComponentIdentifier.test.js

@@ -23,11 +23,12 @@ var _h;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ComponentIdentifier } from '../ComponentIdentifier';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 describe('ComponentIdentifier', () => {
   var _App;
   beforeAll(() => {
@@ -42,7 +43,7 @@ describe('ComponentIdentifier', () => {
   class App extends Component {
     render() {
       const trigger = ComponentIdentifier.pick(Trigger, this.props.children);
-      return /*#__PURE__*/React.createElement("div", null, _h || (_h = /*#__PURE__*/React.createElement("h2", null, "Trigger")), trigger);
+      return ___EmotionJSX("div", null, _h || (_h = ___EmotionJSX("h2", null, "Trigger")), trigger);
     }
   }
   App.displayName = "App";
@@ -54,21 +55,21 @@ describe('ComponentIdentifier', () => {
   };
   it('should render only child', () => {
     let buttonRef;
-    render( /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Trigger, null, /*#__PURE__*/React.createElement("button", {
+    render(___EmotionJSX(App, null, ___EmotionJSX(Trigger, null, ___EmotionJSX("button", {
       ref: el => buttonRef = el
     }, "Click Me"))));
     expect(buttonRef.textContent).toEqual('Click Me');
   });
   it('should not error when no children provided', () => {
-    const renderApp = () => render(_App || (_App = /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Trigger, null))));
+    const renderApp = () => render(_App || (_App = ___EmotionJSX(App, null, ___EmotionJSX(Trigger, null))));
     expect(renderApp).not.toThrow();
   });
   it('should pass props', () => {
     let buttonRef;
     const onClick = jest.fn();
-    render( /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Trigger, {
+    render(___EmotionJSX(App, null, ___EmotionJSX(Trigger, {
       onClick: onClick
-    }, /*#__PURE__*/React.createElement("button", {
+    }, ___EmotionJSX("button", {
       ref: el => buttonRef = el
     }, "Click Me"))));
     buttonRef.click();

package/es/__new-tests__/DeterministicIdContext.test.js

@@ -27,9 +27,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { withDeterministicId, DeterministicIdContextProvider, generateInstanceCounterMap } from '../DeterministicIdContext';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 let TestComponent = (_dec = withDeterministicId(), _dec(_class = (_class2 = class TestComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", {
+    return ___EmotionJSX("div", {
       "data-testid": "test-component",
       id: this.props.deterministicId()
     }, this.props.children);
@@ -37,7 +38,7 @@ let TestComponent = (_dec = withDeterministicId(), _dec(_class = (_class2 = clas
 }, _class2.displayName = "TestComponent", _class2)) || _class);
 class WrapperComponent extends React.Component {
   render() {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TestComponent, null)));
+    return _div || (_div = ___EmotionJSX("div", null, ___EmotionJSX(TestComponent, null)));
   }
 }
 WrapperComponent.displayName = "WrapperComponent";
@@ -47,22 +48,22 @@ const uniqueIds = el => {
 };
 describe('DeterministicIdContext', () => {
   it('can be found and tested with ReactTestUtils', () => {
-    render(_WrapperComponent || (_WrapperComponent = /*#__PURE__*/React.createElement(WrapperComponent, null)));
+    render(_WrapperComponent || (_WrapperComponent = ___EmotionJSX(WrapperComponent, null)));
     const testComponent = screen.getByTestId('test-component');
     expect(testComponent).toBeInTheDocument();
     expect(testComponent.id).toBeDefined();
   });
   it('should generate unique ids without Provider wrapper', () => {
-    render(_div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
+    render(_div2 || (_div2 = ___EmotionJSX("div", {
       "data-testid": "test-components"
-    }, /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null))));
+    }, ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null))));
     const el = screen.getByTestId('test-components');
     expect(uniqueIds(el)).toBe(true);
   });
   it('should generate unique ids when components are rendered both out and inside of provider', () => {
-    render(_div3 || (_div3 = /*#__PURE__*/React.createElement("div", {
+    render(_div3 || (_div3 = ___EmotionJSX("div", {
       "data-testid": "test-components"
-    }, /*#__PURE__*/React.createElement(DeterministicIdContextProvider, null, /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null)), /*#__PURE__*/React.createElement(TestComponent, null), /*#__PURE__*/React.createElement(TestComponent, null))));
+    }, ___EmotionJSX(DeterministicIdContextProvider, null, ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null)), ___EmotionJSX(TestComponent, null), ___EmotionJSX(TestComponent, null))));
     const el = screen.getByTestId('test-components');
     expect(uniqueIds(el)).toBe(true);
   });
@@ -70,19 +71,19 @@ describe('DeterministicIdContext', () => {
     const Wrapper = ({
       children
     }) => {
-      return /*#__PURE__*/React.createElement(DeterministicIdContextProvider, {
+      return ___EmotionJSX(DeterministicIdContextProvider, {
         instanceCounterMap: generateInstanceCounterMap()
-      }, /*#__PURE__*/React.createElement("div", {
+      }, ___EmotionJSX("div", {
         "data-testid": "wrapper"
       }, children));
     };
     const children = [];
     for (let i = 0; i < 10; i++) {
-      children.push( /*#__PURE__*/React.createElement(TestComponent, {
+      children.push(___EmotionJSX(TestComponent, {
         key: i
       }));
     }
-    render( /*#__PURE__*/React.createElement(Wrapper, null, children));
+    render(___EmotionJSX(Wrapper, null, children));
     const el = screen.getByTestId('wrapper');
     expect(uniqueIds(el)).toBe(true);
   });

package/es/__new-tests__/callRenderProp.test.js

@@ -28,6 +28,7 @@ import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { callRenderProp } from '../callRenderProp';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 describe('callRenderProp', () => {
   it('strings', () => {
     expect(callRenderProp('foo')).toEqual('foo');
@@ -44,18 +45,18 @@ describe('callRenderProp', () => {
     expect(callRenderProp(false)).toEqual(false);
   });
   it('JSX literals', () => {
-    const Foo = () => _div || (_div = /*#__PURE__*/React.createElement("div", null, "hello"));
-    expect(callRenderProp( /*#__PURE__*/React.createElement(Foo, null))).toStrictEqual( /*#__PURE__*/React.createElement(Foo, null));
+    const Foo = () => _div || (_div = ___EmotionJSX("div", null, "hello"));
+    expect(callRenderProp(___EmotionJSX(Foo, null))).toStrictEqual(___EmotionJSX(Foo, null));
   });
   it('React classes', () => {
     class Foo extends React.Component {
       render() {
-        return _div2 || (_div2 = /*#__PURE__*/React.createElement("div", null, "hello"));
+        return _div2 || (_div2 = ___EmotionJSX("div", null, "hello"));
       }
     }
     Foo.displayName = "Foo";
     const Result = callRenderProp(Foo);
-    expect(Result).toStrictEqual( /*#__PURE__*/React.createElement(Foo, null));
+    expect(Result).toStrictEqual(___EmotionJSX(Foo, null));
     const _render = render(Result),
       getByText = _render.getByText;
     expect(getByText('hello')).toBeInTheDocument();
@@ -65,7 +66,7 @@ describe('callRenderProp', () => {
       return 'some text';
     };
     const result = callRenderProp(Baz);
-    const _render2 = render( /*#__PURE__*/React.createElement("div", null, result)),
+    const _render2 = render(___EmotionJSX("div", null, result)),
       getByText = _render2.getByText;
     expect(getByText('some text')).toBeInTheDocument();
   });
@@ -81,7 +82,7 @@ describe('callRenderProp', () => {
     // if it was a real untranspiled fat arrow function.
     if (Baz.prototype) Baz.prototype = void 0;
     const result = callRenderProp(Baz);
-    const _render3 = render( /*#__PURE__*/React.createElement("div", null, result)),
+    const _render3 = render(___EmotionJSX("div", null, result)),
       getByText = _render3.getByText;
     expect(getByText('some text')).toBeInTheDocument();
   });
@@ -89,18 +90,18 @@ describe('callRenderProp', () => {
     it('should pass props correctly to functions', () => {
       const someFunc = ({
         shape
-      }) => /*#__PURE__*/React.createElement("div", null, shape);
+      }) => ___EmotionJSX("div", null, shape);
       const result = callRenderProp(someFunc, {
         shape: 'rectangle'
       });
-      const _render4 = render( /*#__PURE__*/React.createElement("div", null, result)),
+      const _render4 = render(___EmotionJSX("div", null, result)),
         getByText = _render4.getByText;
       expect(getByText('rectangle')).toBeInTheDocument();
     });
     it('should pass props correctly to React classes', () => {
       class Foo extends React.Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.shape);
+          return ___EmotionJSX("div", null, this.props.shape);
         }
       }
       Foo.displayName = "Foo";
@@ -113,7 +114,7 @@ describe('callRenderProp', () => {
       const result = callRenderProp(Foo, {
         shape: 'rectangle'
       });
-      const _render5 = render( /*#__PURE__*/React.createElement("div", null, result)),
+      const _render5 = render(___EmotionJSX("div", null, result)),
         getByText = _render5.getByText;
       expect(getByText('rectangle')).toBeInTheDocument();
     });

package/es/__new-tests__/deprecated.test.js

@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { deprecated } from '../deprecated';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return ___EmotionJSX("div", null, this.props.qux, " ", this.props.bar);
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -50,7 +51,7 @@ describe('@deprecated', () => {
     })(TestComponent);
     it('should warn when suggesting new prop when using old prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent || (_DeprecatedComponent = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent || (_DeprecatedComponent = ___EmotionJSX(DeprecatedComponent, {
         foo: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] `foo` is deprecated and will be removed in version 2.1.0. Use `bar` instead. ';
@@ -59,7 +60,7 @@ describe('@deprecated', () => {
     });
     it('should warn when using old prop with no new prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent2 || (_DeprecatedComponent2 = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent2 || (_DeprecatedComponent2 = ___EmotionJSX(DeprecatedComponent, {
         baz: "Goodbye"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] `baz` is deprecated and will be removed in version 2.1.0.';
@@ -68,7 +69,7 @@ describe('@deprecated', () => {
     });
     it('should not output a warning using new prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent3 || (_DeprecatedComponent3 = /*#__PURE__*/React.createElement(DeprecatedComponent, {
+      render(_DeprecatedComponent3 || (_DeprecatedComponent3 = ___EmotionJSX(DeprecatedComponent, {
         bar: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -80,7 +81,7 @@ describe('@deprecated', () => {
     const DeprecatedComponent = deprecated('3.4.0')(TestComponent);
     it('should warn that the entire component is deprecated if no old props are supplied', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_DeprecatedComponent4 || (_DeprecatedComponent4 = /*#__PURE__*/React.createElement(DeprecatedComponent, null)));
+      render(_DeprecatedComponent4 || (_DeprecatedComponent4 = ___EmotionJSX(DeprecatedComponent, null)));
       const expectedWarningMessage = 'Warning: [TestComponent] is deprecated and will be removed in version 3.4.0.';
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
@@ -92,7 +93,7 @@ describe('@deprecated', () => {
     it('should warn that the component is deprecated and output a warning that the package changed', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       const expectedWarningMessage = 'Warning: [TestComponent] is deprecated and will be removed in version 5.0.0. It has been moved from @instructure/ui-forms to @instructure/ui-number-input.';
-      render(_DeprecatedComponent5 || (_DeprecatedComponent5 = /*#__PURE__*/React.createElement(DeprecatedComponent, null)));
+      render(_DeprecatedComponent5 || (_DeprecatedComponent5 = ___EmotionJSX(DeprecatedComponent, null)));
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
     });
@@ -102,7 +103,7 @@ describe('@deprecated', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return ___EmotionJSX("div", null, this.props.color);
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -112,7 +113,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render( /*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(___EmotionJSX(DeprecatedPropValueComponent, {
         color: "yellow"
       }));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -123,7 +124,7 @@ describe('@deprecated', () => {
       const color = 'orange';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return ___EmotionJSX("div", null, this.props.color);
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -133,7 +134,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render( /*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(___EmotionJSX(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated.`;
@@ -146,7 +147,7 @@ describe('@deprecated', () => {
       const message = 'It will be removed in v8.0.0.';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return ___EmotionJSX("div", null, this.props.color);
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -156,7 +157,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render( /*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(___EmotionJSX(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated. ${message}`;
@@ -169,7 +170,7 @@ describe('@deprecated', () => {
       const color = 'gold';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return ___EmotionJSX("div", null, this.props.color);
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -179,7 +180,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render( /*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(___EmotionJSX(DeprecatedPropValueComponent, {
         color: color
       }));
       const _messageMock$mock$cal = messageMock.mock.calls[0][0],
@@ -199,7 +200,7 @@ describe('@deprecated', () => {
       const color = 'gold';
       class DeprecatedPropValueComponent extends Component {
         render() {
-          return /*#__PURE__*/React.createElement("div", null, this.props.color);
+          return ___EmotionJSX("div", null, this.props.color);
         }
       }
       DeprecatedPropValueComponent.displayName = "DeprecatedPropValueComponent";
@@ -212,7 +213,7 @@ describe('@deprecated', () => {
       DeprecatedPropValueComponent.defaultProps = {
         color: 'red'
       };
-      render( /*#__PURE__*/React.createElement(DeprecatedPropValueComponent, {
+      render(___EmotionJSX(DeprecatedPropValueComponent, {
         color: color
       }));
       const expectedWarningMessage = `The ${color} value for color has been deprecated. Use the FooBar component with the 'baz' prop set instead.`;

package/es/__new-tests__/experimental.test.js

@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { experimental } from '../experimental';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return ___EmotionJSX("div", null, this.props.qux, " ", this.props.bar);
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -47,7 +48,7 @@ describe('@experimental', () => {
     const ExperimentalComponent = experimental(['bar'])(TestComponent);
     it('should warn when using an experimental prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen || (_ExperimentalComponen = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen || (_ExperimentalComponen = ___EmotionJSX(ExperimentalComponent, {
         bar: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is experimental and its API could change significantly in a future release.';
@@ -56,7 +57,7 @@ describe('@experimental', () => {
     });
     it('should not output a warning using a non-experimental prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen2 || (_ExperimentalComponen2 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen2 || (_ExperimentalComponen2 = ___EmotionJSX(ExperimentalComponent, {
         qux: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();
@@ -64,7 +65,7 @@ describe('@experimental', () => {
     });
     it('should not output a warning for an experimental prop when dangerously ignored', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen3 || (_ExperimentalComponen3 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen3 || (_ExperimentalComponen3 = ___EmotionJSX(ExperimentalComponent, {
         qux: "Jane",
         __dangerouslyIgnoreExperimentalWarnings: true
       })));
@@ -77,14 +78,14 @@ describe('@experimental', () => {
     const ExperimentalComponent = experimental()(TestComponent);
     it('should warn that the entire component is experimental if no props are supplied', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen4 || (_ExperimentalComponen4 = /*#__PURE__*/React.createElement(ExperimentalComponent, null)));
+      render(_ExperimentalComponen4 || (_ExperimentalComponen4 = ___EmotionJSX(ExperimentalComponent, null)));
       const expectedWarningMessage = 'Warning: [TestComponent] is experimental and its API could change significantly in a future release.';
       expect(consoleWarningSpy).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
       consoleWarningSpy.mockRestore();
     });
     it('should not output a warning for a component when dangerously ignored', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_ExperimentalComponen5 || (_ExperimentalComponen5 = /*#__PURE__*/React.createElement(ExperimentalComponent, {
+      render(_ExperimentalComponen5 || (_ExperimentalComponen5 = ___EmotionJSX(ExperimentalComponent, {
         __dangerouslyIgnoreExperimentalWarnings: true
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();

package/es/__new-tests__/hack.test.js

@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { hack } from '../hack';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 class TestComponent extends Component {
   render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.qux, " ", this.props.bar);
+    return ___EmotionJSX("div", null, this.props.qux, " ", this.props.bar);
   }
 }
 TestComponent.displayName = "TestComponent";
@@ -47,7 +48,7 @@ describe('@hack', () => {
     const HackComponent = hack(['bar'])(TestComponent);
     it('should warn when using an hack prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_HackComponent || (_HackComponent = /*#__PURE__*/React.createElement(HackComponent, {
+      render(_HackComponent || (_HackComponent = ___EmotionJSX(HackComponent, {
         bar: "Jane"
       })));
       const expectedWarningMessage = 'Warning: [TestComponent] The `bar` prop is a temporary hack and will be removed in a future release.';
@@ -56,7 +57,7 @@ describe('@hack', () => {
     });
     it('should not output a warning using a non-hack prop', () => {
       const consoleWarningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      render(_HackComponent2 || (_HackComponent2 = /*#__PURE__*/React.createElement(HackComponent, {
+      render(_HackComponent2 || (_HackComponent2 = ___EmotionJSX(HackComponent, {
         qux: "Jane"
       })));
       expect(consoleWarningSpy).not.toHaveBeenCalled();

package/es/__new-tests__/safeCloneElement.test.js

@@ -22,11 +22,11 @@
  * SOFTWARE.
  */
 
-import React from 'react';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { safeCloneElement } from '../safeCloneElement';
+import { jsx as ___EmotionJSX } from "@emotion/react";
 describe('safeCloneElement', () => {
   const SafeClone = function ({
     element,
@@ -38,8 +38,8 @@ describe('safeCloneElement', () => {
   it('should preserve refs', () => {
     const origRef = jest.fn();
     const cloneRef = jest.fn();
-    render( /*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("div", {
+    render(___EmotionJSX(SafeClone, {
+      element: ___EmotionJSX("div", {
         ref: origRef
       }),
       props: {
@@ -52,8 +52,8 @@ describe('safeCloneElement', () => {
   it('should preserve event handlers', () => {
     const onClickA = jest.fn();
     const onClickB = jest.fn();
-    render( /*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("button", {
+    render(___EmotionJSX(SafeClone, {
+      element: ___EmotionJSX("button", {
         onClick: onClickA
       }),
       props: {
@@ -69,8 +69,8 @@ describe('safeCloneElement', () => {
     const onClickA = jest.fn();
     const onClickB = jest.fn();
     const onClickC = jest.fn();
-    render( /*#__PURE__*/React.createElement(SafeClone, {
-      element: /*#__PURE__*/React.createElement("button", {
+    render(___EmotionJSX(SafeClone, {
+      element: ___EmotionJSX("button", {
         onClick: onClickA
       }),
       props: {

package/es/ensureSingleChild.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { Children } from 'react';
+import { Children } from 'react';
 import { safeCloneElement } from './safeCloneElement';
 
 /**
@@ -39,12 +39,13 @@ import { safeCloneElement } from './safeCloneElement';
  * @param {Object} props - props for child
  * @returns {ReactElement|null} cloned instance for a single child, or children wrapped in a span
  */
+import { jsx as ___EmotionJSX } from "@emotion/react";
 function ensureSingleChild(child, props = {}) {
   const childCount = Children.count(child);
   if (childCount === 0) {
     return null;
   } else if (typeof child === 'string' && child.length > 0 || childCount > 1) {
-    return /*#__PURE__*/React.createElement("span", props, child);
+    return ___EmotionJSX("span", props, child);
   } else {
     // TODO: check that we can only end up here if child is ReactElement
     return safeCloneElement(Array.isArray(child) ? child[0] : child, props);

package/lib/DeterministicIdContext/DeterministicIdContextProvider.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DeterministicIdContextProvider = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _DeterministicIdContext = require("./DeterministicIdContext");
+var _react = require("@emotion/react");
 /*
  * The MIT License (MIT)
  *
@@ -48,7 +47,7 @@ const DeterministicIdContextProvider = ({
   children,
   instanceCounterMap
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContext.Provider, {
+  return (0, _react.jsx)(_DeterministicIdContext.DeterministicIdContext.Provider, {
     value: instanceCounterMap
   }, children);
 };

package/lib/DeterministicIdContext/withDeterministicId.js

@@ -1,17 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withDeterministicId = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 var _DeterministicIdContext = require("./DeterministicIdContext");
 var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
 var _generateId = require("@instructure/ui-utils/lib/generateId.js");
 var _console = require("@instructure/console");
+var _react2 = require("@emotion/react");
 /*
  * The MIT License (MIT)
  *
@@ -52,7 +54,7 @@ const withDeterministicId = exports.withDeterministicId = (0, _decorator.decorat
     if (props.deterministicId) {
       (0, _console.warn)(false, `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, props.deterministicId);
     }
-    return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
+    return (0, _react2.jsx)(ComposedComponent, (0, _extends2.default)({
       ref: ref,
       deterministicId: deterministicId
     }, props));