@instructure/ui-buttons 10.16.1-snapshot-0 → 10.16.1

package/lib/CloseButton/__new-tests__/CloseButton.test.js

@@ -1,12 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _CloseButton;
 /*
  * The MIT License (MIT)
@@ -41,10 +41,10 @@ describe('<CloseButton />', () => {
     consoleWarningMock.mockRestore();
   });
   it('should render with x icon', async () => {
-    (0, _react2.render)(_CloseButton || (_CloseButton = /*#__PURE__*/_react.default.createElement(_index.CloseButton, {
+    (0, _react.render)(_CloseButton || (_CloseButton = (0, _jsxRuntime.jsx)(_index.CloseButton, {
       screenReaderLabel: "Close"
     })));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     const icon = document.querySelector('svg');
     expect(icon).toBeInTheDocument();
     expect(icon).toHaveAttribute('name', 'IconX');
@@ -53,13 +53,13 @@ describe('<CloseButton />', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.CloseButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.CloseButton, {
       onClick: onClick,
       screenReaderLabel: "Hello"
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     await _userEvent.default.click(button);
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       expect(onClick).toHaveBeenCalledTimes(1);
     });
   });

package/lib/CloseButton/index.js

@@ -17,6 +17,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _BaseButton = require("../BaseButton");
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["screenReaderLabel", "elementRef", "size", "onClick", "margin", "placement", "offset", "type", "as", "href", "cursor", "tabIndex", "styles"];
 var _dec, _dec2, _class, _CloseButton;
 /*
@@ -42,7 +43,6 @@ var _dec, _dec2, _class, _CloseButton;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components
@@ -92,25 +92,30 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
       tabIndex = _this$props3.tabIndex,
       styles = _this$props3.styles,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    return (0, _emotion.jsx)("span", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _jsxRuntime.jsx)("span", {
+      ...(0, _passthroughProps.passthroughProps)(props),
       css: styles === null || styles === void 0 ? void 0 : styles.closeButton,
-      ref: el => this.ref = el
-    }), (0, _emotion.jsx)(_BaseButton.BaseButton, {
-      renderIcon: _IconXSolid.IconXSolid,
-      elementRef: this.handleRef,
-      interaction: this.interaction,
-      type: type,
-      color: this.color,
-      size: size,
-      onClick: onClick,
-      margin: margin,
-      withBorder: false,
-      withBackground: false,
-      as: as,
-      href: href,
-      cursor: cursor,
-      tabIndex: tabIndex
-    }, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel)));
+      ref: el => this.ref = el,
+      children: (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
+        renderIcon: _IconXSolid.IconXSolid,
+        elementRef: this.handleRef,
+        interaction: this.interaction,
+        type: type,
+        color: this.color,
+        size: size,
+        onClick: onClick,
+        margin: margin,
+        withBorder: false,
+        withBackground: false,
+        as: as,
+        href: href,
+        cursor: cursor,
+        tabIndex: tabIndex,
+        children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+          children: screenReaderLabel
+        })
+      })
+    });
   }
 }, _CloseButton.displayName = "CloseButton", _CloseButton.componentId = 'CloseButton', _CloseButton.propTypes = _props.propTypes, _CloseButton.allowedProps = _props.allowedProps, _CloseButton.defaultProps = {
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied

package/lib/CondensedButton/__new-tests__/CondensedButton.test.js

@@ -1,12 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _circle, _CondensedButton, _CondensedButton2, _CondensedButton3, _CondensedButton4, _CondensedButton5, _CondensedButton6, _CondensedButton7;
 /*
  * The MIT License (MIT)
@@ -33,22 +33,25 @@ var _circle, _CondensedButton, _CondensedButton2, _CondensedButton3, _CondensedB
  */
 describe('<CondensedButton/>', () => {
   var _CondensedButton8;
-  const icon = /*#__PURE__*/_react.default.createElement("svg", {
+  const icon = (0, _jsxRuntime.jsx)("svg", {
     "data-title": "myIcon",
     height: "1em",
     width: "1em",
     style: {
       fill: 'currentcolor'
-    }
-  }, _circle || (_circle = /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "0.5em",
-    cy: "0.5em",
-    r: "0.5em"
-  })));
+    },
+    children: _circle || (_circle = (0, _jsxRuntime.jsx)("circle", {
+      cx: "0.5em",
+      cy: "0.5em",
+      r: "0.5em"
+    }))
+  });
   const iconSelector = 'svg[data-title="myIcon"]';
   it('should render children', () => {
     const children = 'Hello world';
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.CondensedButton, null, children));
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      children: children
+    }));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent(children);
@@ -56,12 +59,13 @@ describe('<CondensedButton/>', () => {
   it('should provide a focused getter', () => {
     var _componentRef;
     let componentRef;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.CondensedButton, {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+      },
+      children: "Hello"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     button.focus();
@@ -70,22 +74,24 @@ describe('<CondensedButton/>', () => {
   it('should provide a focus function', () => {
     var _componentRef2;
     let componentRef;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.CondensedButton, {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+      },
+      children: "Hello"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     (_componentRef2 = componentRef) === null || _componentRef2 === void 0 ? void 0 : _componentRef2.focus();
     expect(document.activeElement).toBe(button);
   });
   it('should pass the type attribute', () => {
-    (0, _react2.render)(_CondensedButton || (_CondensedButton = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      type: "submit"
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_CondensedButton || (_CondensedButton = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      type: "submit",
+      children: "Hello"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toBeInTheDocument();
@@ -93,18 +99,20 @@ describe('<CondensedButton/>', () => {
   });
   it('should pass the `elementRef` prop', async () => {
     const elementRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      elementRef: elementRef
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      elementRef: elementRef,
+      children: "Hello"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(elementRef).toHaveBeenCalledWith(button);
   });
   it('should pass the `as` prop', () => {
-    const _render = (0, _react2.render)(_CondensedButton2 || (_CondensedButton2 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-        as: "li"
-      }, "Hello"))),
+    const _render = (0, _react.render)(_CondensedButton2 || (_CondensedButton2 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+        as: "li",
+        children: "Hello"
+      }))),
       container = _render.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -112,57 +120,63 @@ describe('<CondensedButton/>', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` is set to disabled', () => {
-    (0, _react2.render)(_CondensedButton3 || (_CondensedButton3 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      interaction: "disabled"
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_CondensedButton3 || (_CondensedButton3 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      interaction: "disabled",
+      children: "Hello"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `disabled` is set', () => {
-    (0, _react2.render)(_CondensedButton4 || (_CondensedButton4 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      disabled: true
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_CondensedButton4 || (_CondensedButton4 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      disabled: true,
+      children: "Hello"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `interaction` is set to readonly', () => {
-    (0, _react2.render)(_CondensedButton5 || (_CondensedButton5 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      interaction: "readonly"
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_CondensedButton5 || (_CondensedButton5 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      interaction: "readonly",
+      children: "Hello"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `readOnly` is set', () => {
-    (0, _react2.render)(_CondensedButton6 || (_CondensedButton6 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      readOnly: true
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_CondensedButton6 || (_CondensedButton6 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      readOnly: true,
+      children: "Hello"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should pass the `href` prop', () => {
-    (0, _react2.render)(_CondensedButton7 || (_CondensedButton7 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      href: "#"
-    }, "Hello")));
-    const linkButton = _react2.screen.getByRole('link', {
+    (0, _react.render)(_CondensedButton7 || (_CondensedButton7 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      href: "#",
+      children: "Hello"
+    })));
+    const linkButton = _react.screen.getByRole('link', {
       name: 'Hello'
     });
     expect(linkButton).toBeInTheDocument();
     expect(linkButton).toHaveAttribute('href', '#');
   });
   it('should pass the `renderIcon` prop', async () => {
-    (0, _react2.render)(_CondensedButton8 || (_CondensedButton8 = /*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      renderIcon: icon
-    }, "Hello")));
+    (0, _react.render)(_CondensedButton8 || (_CondensedButton8 = (0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      renderIcon: icon,
+      children: "Hello"
+    })));
     const svgIcon = document.querySelector(iconSelector);
-    const button = _react2.screen.getByRole('button', {
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toBeInTheDocument();
@@ -170,14 +184,15 @@ describe('<CondensedButton/>', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.CondensedButton, {
-      onClick: onClick
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.CondensedButton, {
+      onClick: onClick,
+      children: "Hello"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     await _userEvent.default.click(button);
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       expect(onClick).toHaveBeenCalledTimes(1);
     });
   });

package/lib/CondensedButton/index.js

@@ -1,19 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CondensedButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _emotion = require("@instructure/emotion");
 var _theme = _interopRequireDefault(require("./theme"));
 var _BaseButton = require("../BaseButton");
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
 var _dec, _dec2, _class, _CondensedButton;
 /*
@@ -79,7 +79,8 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
       renderIcon = _this$props.renderIcon,
       props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
-    return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
+      ...(0, _passthroughProps.passthroughProps)(props),
       isCondensed: true,
       withBackground: false,
       withBorder: false,
@@ -96,8 +97,9 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
       themeOverride: themeOverride,
       ref: component => {
         this._baseButton = component;
-      }
-    }), children);
+      },
+      children: children
+    });
   }
 }, _CondensedButton.displayName = "CondensedButton", _CondensedButton.componentId = 'CondensedButton', _CondensedButton.propTypes = _props.propTypes, _CondensedButton.allowedProps = _props.allowedProps, _CondensedButton.defaultProps = {
   type: 'button',

package/lib/IconButton/__new-tests__/IconButton.test.js

@@ -1,12 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _circle;
 /*
  * The MIT License (MIT)
@@ -33,99 +33,101 @@ var _circle;
  */
 describe('<IconButton/>', () => {
   var _IconButton, _IconButton2, _IconButton3, _IconButton4, _IconButton5, _IconButton6, _IconButton7, _IconButton8, _IconButton9;
-  const icon = /*#__PURE__*/_react.default.createElement("svg", {
+  const icon = (0, _jsxRuntime.jsx)("svg", {
     "data-title": "myIcon",
     height: "1em",
     width: "1em",
     style: {
       fill: 'currentcolor'
-    }
-  }, _circle || (_circle = /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "0.5em",
-    cy: "0.5em",
-    r: "0.5em"
-  })));
+    },
+    children: _circle || (_circle = (0, _jsxRuntime.jsx)("circle", {
+      cx: "0.5em",
+      cy: "0.5em",
+      r: "0.5em"
+    }))
+  });
   const iconSelector = 'svg[data-title="myIcon"]';
   it('should render an icon when provided as the `children` prop', () => {
-    (0, _react2.render)(_IconButton || (_IconButton = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
-      screenReaderLabel: "some action"
-    }, icon)));
+    (0, _react.render)(_IconButton || (_IconButton = (0, _jsxRuntime.jsx)(_index.IconButton, {
+      screenReaderLabel: "some action",
+      children: icon
+    })));
     const svgIcon = document.querySelector(iconSelector);
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(svgIcon).toBeInTheDocument();
     expect(button).toHaveTextContent('some action');
   });
   it('should render an icon when provided as the `renderIcon` prop', () => {
-    (0, _react2.render)(_IconButton2 || (_IconButton2 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton2 || (_IconButton2 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon
     })));
     const svgIcon = document.querySelector(iconSelector);
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(svgIcon).toBeInTheDocument();
   });
   it('should provide a focused getter', () => {
     var _componentRef;
     let componentRef;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       ref: component => {
         componentRef = component;
       }
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     button.focus();
     expect((_componentRef = componentRef) === null || _componentRef === void 0 ? void 0 : _componentRef.focused).toBe(true);
   });
   it('should provide a focus function', () => {
     var _componentRef2;
     let componentRef;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       ref: component => {
         componentRef = component;
       }
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     (_componentRef2 = componentRef) === null || _componentRef2 === void 0 ? void 0 : _componentRef2.focus();
     expect(document.activeElement).toBe(button);
   });
   it('should pass the `href` prop', () => {
-    (0, _react2.render)(_IconButton3 || (_IconButton3 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton3 || (_IconButton3 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       href: "#"
     })));
-    const linkButton = _react2.screen.getByRole('link');
+    const linkButton = _react.screen.getByRole('link');
     expect(linkButton).toBeInTheDocument();
     expect(linkButton).toHaveAttribute('href', '#');
   });
   it('should pass the `type` prop', () => {
-    (0, _react2.render)(_IconButton4 || (_IconButton4 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton4 || (_IconButton4 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       type: "reset"
     })));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('type', 'reset');
   });
   it('should pass the `elementRef` prop', () => {
     const elementRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       elementRef: elementRef
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(elementRef).toHaveBeenCalledWith(button);
   });
   it('should pass the `as` prop', () => {
-    const _render = (0, _react2.render)(_IconButton5 || (_IconButton5 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    const _render = (0, _react.render)(_IconButton5 || (_IconButton5 = (0, _jsxRuntime.jsx)(_index.IconButton, {
         screenReaderLabel: "some action",
         renderIcon: icon,
         as: "li"
@@ -137,51 +139,51 @@ describe('<IconButton/>', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` is set to disabled', () => {
-    (0, _react2.render)(_IconButton6 || (_IconButton6 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton6 || (_IconButton6 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       interaction: "disabled"
     })));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `disabled` is set', () => {
-    (0, _react2.render)(_IconButton7 || (_IconButton7 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton7 || (_IconButton7 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       disabled: true
     })));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `interaction` is set to readonly', () => {
-    (0, _react2.render)(_IconButton8 || (_IconButton8 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton8 || (_IconButton8 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       interaction: "readonly"
     })));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `readOnly` is set', () => {
-    (0, _react2.render)(_IconButton9 || (_IconButton9 = /*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)(_IconButton9 || (_IconButton9 = (0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       readOnly: true
     })));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     expect(button).toHaveAttribute('disabled');
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.IconButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       onClick: onClick
     }));
-    const button = _react2.screen.getByRole('button');
+    const button = _react.screen.getByRole('button');
     await _userEvent.default.click(button);
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       expect(onClick).toHaveBeenCalledTimes(1);
     });
   });

package/lib/IconButton/index.js

@@ -1,13 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.IconButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
@@ -15,6 +14,7 @@ var _emotion = require("@instructure/emotion");
 var _theme = _interopRequireDefault(require("./theme"));
 var _BaseButton = require("../BaseButton");
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
 var _dec, _dec2, _class, _IconButton;
 /*
@@ -85,7 +85,8 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
       href = _this$props.href,
       props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
-    return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
+      ...(0, _passthroughProps.passthroughProps)(props),
       type: type,
       size: size,
       elementRef: this.handleRef,
@@ -103,8 +104,11 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
       themeOverride: themeOverride,
       ref: component => {
         this._baseButton = component;
-      }
-    }), /*#__PURE__*/_react.default.createElement(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel));
+      },
+      children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+        children: screenReaderLabel
+      })
+    });
   }
 }, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.propTypes = _props.propTypes, _IconButton.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
   type: 'button',