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

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

@@ -1,13 +1,13 @@
 "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 _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _circle, _Button, _Button2, _Button3, _Button4, _Button5, _Button6, _Button7, _Button8, _Button10, _Button11, _Button12, _Button13, _Button14, _Button15, _Button16, _Button17;
 /*
  * The MIT License (MIT)
@@ -37,18 +37,19 @@ describe('<Button/>', () => {
   let consoleWarningMock;
   let consoleErrorMock;
   const iconSelector = 'svg[data-title="myIcon"]';
-  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"
+    }))
+  });
   beforeEach(() => {
     // Mocking console to prevent test output pollution
     consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
@@ -60,14 +61,18 @@ describe('<Button/>', () => {
   });
   it('should render children', () => {
     const children = 'Hello world';
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, null, children));
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
+      children: children
+    }));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent(children);
   });
   it('should render a button', async () => {
-    (0, _react2.render)(_Button || (_Button = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World")));
-    const button = _react2.screen.getByRole('button');
+    (0, _react.render)(_Button || (_Button = (0, _jsxRuntime.jsx)(_index.Button, {
+      children: "Hello World"
+    })));
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('type', 'button');
     expect(button).toHaveTextContent('Hello World');
@@ -75,14 +80,15 @@ describe('<Button/>', () => {
   it('should provide a focused getter', () => {
     var _componentRef;
     let componentRef;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button
     //@ts-expect-error TODO this is coming from ReactComponentWrapper
     , {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+      },
+      children: "Hello"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     button.focus();
@@ -91,24 +97,26 @@ describe('<Button/>', () => {
   it('should provide a focus function', () => {
     var _componentRef2;
     let componentRef;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button
     //@ts-expect-error TODO this is coming from ReactComponentWrapper
     , {
       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)(_Button2 || (_Button2 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      type: "submit"
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_Button2 || (_Button2 = (0, _jsxRuntime.jsx)(_index.Button, {
+      type: "submit",
+      children: "Hello"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toBeInTheDocument();
@@ -116,18 +124,20 @@ describe('<Button/>', () => {
   });
   it('should pass the `elementRef` prop', () => {
     const elementRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
-      elementRef: elementRef
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
+      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)(_Button3 || (_Button3 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-        as: "li"
-      }, "Hello"))),
+    const _render = (0, _react.render)(_Button3 || (_Button3 = (0, _jsxRuntime.jsx)(_index.Button, {
+        as: "li",
+        children: "Hello"
+      }))),
       container = _render.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -135,57 +145,63 @@ describe('<Button/>', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` is set to disabled', () => {
-    (0, _react2.render)(_Button4 || (_Button4 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      interaction: "disabled"
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_Button4 || (_Button4 = (0, _jsxRuntime.jsx)(_index.Button, {
+      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)(_Button5 || (_Button5 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      disabled: true
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_Button5 || (_Button5 = (0, _jsxRuntime.jsx)(_index.Button, {
+      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)(_Button6 || (_Button6 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      interaction: "readonly"
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_Button6 || (_Button6 = (0, _jsxRuntime.jsx)(_index.Button, {
+      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)(_Button7 || (_Button7 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      readOnly: true
-    }, "Hello")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_Button7 || (_Button7 = (0, _jsxRuntime.jsx)(_index.Button, {
+      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)(_Button8 || (_Button8 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      href: "#"
-    }, "Hello")));
-    const linkButton = _react2.screen.getByRole('link', {
+    (0, _react.render)(_Button8 || (_Button8 = (0, _jsxRuntime.jsx)(_index.Button, {
+      href: "#",
+      children: "Hello"
+    })));
+    const linkButton = _react.screen.getByRole('link', {
       name: 'Hello'
     });
     expect(linkButton).toBeInTheDocument();
     expect(linkButton).toHaveAttribute('href', '#');
   });
   it('should pass the `renderIcon` prop', () => {
-    (0, _react2.render)(_Button9 || (_Button9 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      renderIcon: icon
-    }, "Hello")));
+    (0, _react.render)(_Button9 || (_Button9 = (0, _jsxRuntime.jsx)(_index.Button, {
+      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();
@@ -193,53 +209,61 @@ describe('<Button/>', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
-      onClick: onClick
-    }, "Hello"));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
+      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);
     });
   });
   it('should render the children as button text', () => {
-    (0, _react2.render)(_Button10 || (_Button10 = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World")));
-    const button = _react2.screen.getByRole('button');
+    (0, _react.render)(_Button10 || (_Button10 = (0, _jsxRuntime.jsx)(_index.Button, {
+      children: "Hello World"
+    })));
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Hello World');
   });
   it('should not error with a null child', () => {
-    (0, _react2.render)(_Button11 || (_Button11 = /*#__PURE__*/_react.default.createElement(_index.Button, null, "Hello World", null)));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_Button11 || (_Button11 = (0, _jsxRuntime.jsxs)(_index.Button, {
+      children: ["Hello World", null]
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello World'
     });
     expect(button).toBeInTheDocument();
   });
   it('should render a link styled as a button if href is provided', () => {
-    (0, _react2.render)(_Button12 || (_Button12 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-      href: "example.html"
-    }, "Hello World")));
-    const button = _react2.screen.getAllByRole('link', {
+    (0, _react.render)(_Button12 || (_Button12 = (0, _jsxRuntime.jsx)(_index.Button, {
+      href: "example.html",
+      children: "Hello World"
+    })));
+    const button = _react.screen.getAllByRole('link', {
       name: 'Hello World'
     });
     expect(button).toHaveLength(1);
     expect(button[0]).toHaveAttribute('href', 'example.html');
   });
   it('should render as a link when `to` prop is provided', () => {
-    const _render2 = (0, _react2.render)(_Button13 || (_Button13 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-        to: "/example"
-      }, "Test"))),
+    const _render2 = (0, _react.render)(_Button13 || (_Button13 = (0, _jsxRuntime.jsx)(_index.Button, {
+        to: "/example",
+        children: "Test"
+      }))),
       container = _render2.container;
     const linkButton = container.querySelector('a');
     expect(linkButton).toBeInTheDocument();
     expect(linkButton).toHaveAttribute('to', '/example');
   });
   it('should render designated tag if `as` prop is specified', () => {
-    const _render3 = (0, _react2.render)(_Button14 || (_Button14 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-        as: "span"
-      }, "Hello World"))),
+    const _render3 = (0, _react.render)(_Button14 || (_Button14 = (0, _jsxRuntime.jsx)(_index.Button, {
+        as: "span",
+        children: "Hello World"
+      }))),
       container = _render3.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -248,10 +272,11 @@ describe('<Button/>', () => {
   });
   it('should set role="button"', () => {
     const onClick = _vitest.vi.fn();
-    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+    const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         as: "span",
-        onClick: onClick
-      }, "Hello World")),
+        onClick: onClick,
+        children: "Hello World"
+      })),
       container = _render4.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -259,30 +284,33 @@ describe('<Button/>', () => {
   });
   it('should set tabIndex="0"', () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
       as: "span",
-      onClick: onClick
-    }, "Hello World"));
-    const button = _react2.screen.getByRole('button');
+      onClick: onClick,
+      children: "Hello World"
+    }));
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('tabIndex', '0');
   });
   it('should pass down the type prop to the button element', () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
       type: "submit",
-      onClick: onClick
-    }, "Hello World"));
-    const button = _react2.screen.getByRole('button');
+      onClick: onClick,
+      children: "Hello World"
+    }));
+    const button = _react.screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('focuses with the focus helper', () => {
     const onFocus = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
-      onFocus: onFocus
-    }, "Hello World"));
-    const button = _react2.screen.getByRole('button');
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
+      onFocus: onFocus,
+      children: "Hello World"
+    }));
+    const button = _react.screen.getByRole('button');
     button.focus();
     expect(onFocus).toHaveBeenCalled();
     expect(document.activeElement).toBe(button);
@@ -290,128 +318,137 @@ describe('<Button/>', () => {
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
+        onClick: onClick,
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       await _userEvent.default.click(button);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).toHaveBeenCalled();
       });
     });
     it('should not call onClick when button is disabled', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         disabled: true,
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+        onClick: onClick,
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       await _userEvent.default.click(button);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).not.toHaveBeenCalled();
       });
     });
     it('should not call onClick when button is readOnly', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         readOnly: true,
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+        onClick: onClick,
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       await _userEvent.default.click(button);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).not.toHaveBeenCalled();
       });
     });
     it('should not call onClick when button is disabled and an href prop is provided', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(_Button15 || (_Button15 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-        href: "#"
-      }, "Hello World")));
-      const button = _react2.screen.getByRole('link', {
+      (0, _react.render)(_Button15 || (_Button15 = (0, _jsxRuntime.jsx)(_index.Button, {
+        href: "#",
+        children: "Hello World"
+      })));
+      const button = _react.screen.getByRole('link', {
         name: 'Hello World'
       });
       await _userEvent.default.click(button);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).not.toHaveBeenCalled();
       });
     });
     it('should not call onClick when button is readOnly and an href prop is provided', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         readOnly: true,
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('link', {
+        href: "#",
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('link', {
         name: 'Hello World'
       });
       await _userEvent.default.click(button);
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).not.toHaveBeenCalled();
       });
     });
     it('should call onClick when space key is pressed if href is provided', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('link', {
+        href: "#",
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('link', {
         name: 'Hello World'
       });
       await _userEvent.default.type(button, '{space}');
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).toHaveBeenCalled();
       });
     });
     it('should call onClick when enter key is pressed when not a button or link', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         as: "span",
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+        onClick: onClick,
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       await _userEvent.default.type(button, '{enter}');
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).toHaveBeenCalled();
       });
     });
     it('should not call onClick when button is disabled and space key is pressed', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         disabled: true,
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('link', {
+        href: "#",
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('link', {
         name: 'Hello World'
       });
       await _userEvent.default.type(button, '{spaec}');
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).not.toHaveBeenCalled();
       });
     });
     it('should not call onClick when button is readOnly and space key is pressed', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
         readOnly: true,
         onClick: onClick,
-        href: "#"
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('link', {
+        href: "#",
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('link', {
         name: 'Hello World'
       });
       await _userEvent.default.type(button, '{space}');
-      await (0, _react2.waitFor)(() => {
+      await (0, _react.waitFor)(() => {
         expect(onClick).not.toHaveBeenCalled();
       });
     });
@@ -419,24 +456,26 @@ describe('<Button/>', () => {
   describe('for a11y', () => {
     it('should meet standards when onClick is given', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Button, {
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Button, {
+        onClick: onClick,
+        children: "Hello World"
+      }));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       await _userEvent.default.click(button);
-      await (0, _react2.waitFor)(async () => {
+      await (0, _react.waitFor)(async () => {
         const axeCheck = await (0, _runAxeCheck.runAxeCheck)(button);
         expect(axeCheck).toBe(true);
       });
     });
     describe('when disabled', () => {
       it('sets the disabled attribute so that the button is not in tab order', () => {
-        (0, _react2.render)(_Button16 || (_Button16 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-          disabled: true
-        }, "Hello World")));
-        const button = _react2.screen.getByRole('button', {
+        (0, _react.render)(_Button16 || (_Button16 = (0, _jsxRuntime.jsx)(_index.Button, {
+          disabled: true,
+          children: "Hello World"
+        })));
+        const button = _react.screen.getByRole('button', {
           name: 'Hello World'
         });
         expect(button).toHaveAttribute('disabled');
@@ -444,10 +483,11 @@ describe('<Button/>', () => {
     });
     describe('when readOnly', () => {
       it('sets the disabled attribute so that the button is not in tab order', () => {
-        (0, _react2.render)(_Button17 || (_Button17 = /*#__PURE__*/_react.default.createElement(_index.Button, {
-          readOnly: true
-        }, "Hello World")));
-        const button = _react2.screen.getByRole('button', {
+        (0, _react.render)(_Button17 || (_Button17 = (0, _jsxRuntime.jsx)(_index.Button, {
+          readOnly: true,
+          children: "Hello World"
+        })));
+        const button = _react.screen.getByRole('button', {
           name: 'Hello World'
         });
         expect(button).toHaveAttribute('disabled');

package/lib/Button/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.Button = 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 _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -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", "type", "size", "as", "color", "focusColor", "display", "textAlign", "withBackground", "margin", "cursor", "href", "renderIcon"];
 var _dec, _dec2, _class, _Button;
 /*
@@ -107,7 +107,10 @@ let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.defau
       renderIcon,
       themeOverride
     };
-    return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, buttonProps, children);
+    return (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
+      ...buttonProps,
+      children: children
+    });
   }
 }, _Button.displayName = "Button", _Button.componentId = 'Button', _Button.propTypes = _props.propTypes, _Button.allowedProps = _props.allowedProps, _Button.defaultProps = {
   type: 'button',