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

package/lib/BaseButton/__new-tests__/BaseButton.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 _index = require("../index");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _BaseButton, _BaseButton2, _BaseButton3, _BaseButton4, _BaseButton5, _svg, _BaseButton6, _BaseButton7, _BaseButton8, _BaseButton9, _BaseButton10, _BaseButton11;
 /*
  * The MIT License (MIT)
@@ -45,39 +45,46 @@ describe('<BaseButton/>', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render a button and the children as button text', () => {
-    (0, _react2.render)(_BaseButton || (_BaseButton = /*#__PURE__*/_react.default.createElement(_index.BaseButton, null, "Hello World")));
+    (0, _react.render)(_BaseButton || (_BaseButton = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+      children: "Hello World"
+    })));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Hello World');
   });
   it('should not error with a null child', () => {
-    (0, _react2.render)(_BaseButton2 || (_BaseButton2 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, null, "Hello World", null)));
+    (0, _react.render)(_BaseButton2 || (_BaseButton2 = (0, _jsxRuntime.jsxs)(_index.BaseButton, {
+      children: ["Hello World", null]
+    })));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Hello World');
   });
   it('should render a link styled as a button if href is provided', () => {
-    (0, _react2.render)(_BaseButton3 || (_BaseButton3 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-      href: "example.html"
-    }, "Hello World")));
-    const linkButton = _react2.screen.getByRole('link', {
+    (0, _react.render)(_BaseButton3 || (_BaseButton3 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+      href: "example.html",
+      children: "Hello World"
+    })));
+    const linkButton = _react.screen.getByRole('link', {
       name: 'Hello World'
     });
     expect(linkButton).toBeInTheDocument();
     expect(linkButton).toHaveAttribute('href', 'example.html');
   });
   it('should render as a link when `to` prop is provided', () => {
-    const _render = (0, _react2.render)(_BaseButton4 || (_BaseButton4 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-        to: "/example"
-      }, "Test"))),
+    const _render = (0, _react.render)(_BaseButton4 || (_BaseButton4 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+        to: "/example",
+        children: "Test"
+      }))),
       container = _render.container;
     const linkButton = container.querySelector('a');
     expect(linkButton.getAttribute('to')).toBe('/example');
   });
   it('should render designated tag if `as` prop is specified', () => {
-    const _render2 = (0, _react2.render)(_BaseButton5 || (_BaseButton5 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-        as: "span"
-      }, "Hello World"))),
+    const _render2 = (0, _react.render)(_BaseButton5 || (_BaseButton5 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+        as: "span",
+        children: "Hello World"
+      }))),
       container = _render2.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -86,10 +93,11 @@ describe('<BaseButton/>', () => {
   });
   it('should set role="button"', () => {
     const onClick = _vitest.vi.fn();
-    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+    const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         as: "span",
-        onClick: onClick
-      }, "Hello World")),
+        onClick: onClick,
+        children: "Hello World"
+      })),
       container = _render3.container;
     const button = container.querySelector('span[type="button"]');
     expect(button).toBeInTheDocument();
@@ -97,11 +105,12 @@ describe('<BaseButton/>', () => {
   });
   it('should set tabIndex="0"', () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
       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'
     });
     expect(button).toBeInTheDocument();
@@ -109,19 +118,23 @@ describe('<BaseButton/>', () => {
   });
   it('should not set tabIndex="0" when the element has it by default', () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-      as: "button",
-      onClick: onClick
-    }, "Hello Button"), /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-      onClick: onClick,
-      href: "example.html"
-    }, "Hello link")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)((0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(_index.BaseButton, {
+        as: "button",
+        onClick: onClick,
+        children: "Hello Button"
+      }), (0, _jsxRuntime.jsx)(_index.BaseButton, {
+        onClick: onClick,
+        href: "example.html",
+        children: "Hello link"
+      })]
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello Button'
     });
     expect(button).toBeInTheDocument();
     expect(button).not.toHaveAttribute('tabIndex');
-    const link = _react2.screen.getByRole('link', {
+    const link = _react.screen.getByRole('link', {
       name: 'Hello link'
     });
     expect(link).toBeInTheDocument();
@@ -129,31 +142,37 @@ describe('<BaseButton/>', () => {
   });
   it('should pass down the type prop to the button element', async () => {
     const onClick = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
       type: "submit",
-      onClick: onClick
-    }, "Hello World"));
-    const button = _react2.screen.getByRole('button', {
+      onClick: onClick,
+      children: "Hello World"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello World'
     });
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('type', 'submit');
   });
   it('should pass down an icon via the icon property', () => {
-    const SomeIcon = () => _svg || (_svg = /*#__PURE__*/_react.default.createElement("svg", null, /*#__PURE__*/_react.default.createElement("circle", {
-      cx: "25",
-      cy: "75",
-      r: "20"
-    })));
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-      renderIcon: SomeIcon
-    }, "Hello World"));
+    const SomeIcon = () => _svg || (_svg = (0, _jsxRuntime.jsx)("svg", {
+      children: (0, _jsxRuntime.jsx)("circle", {
+        cx: "25",
+        cy: "75",
+        r: "20"
+      })
+    }));
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
+      renderIcon: SomeIcon,
+      children: "Hello World"
+    }));
     const icon = document.querySelector('svg');
     expect(icon).toBeInTheDocument();
   });
   it('focuses with the focus helper', async () => {
-    (0, _react2.render)(_BaseButton6 || (_BaseButton6 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, null, "Hello World")));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)(_BaseButton6 || (_BaseButton6 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+      children: "Hello World"
+    })));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello World'
     });
     button.focus();
@@ -161,10 +180,11 @@ describe('<BaseButton/>', () => {
   });
   it('should provide an elementRef prop', async () => {
     const elementRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-      elementRef: elementRef
-    }, "Hello World"));
-    const button = _react2.screen.getByRole('button', {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
+      elementRef: elementRef,
+      children: "Hello World"
+    }));
+    const button = _react.screen.getByRole('button', {
       name: 'Hello World'
     });
     expect(elementRef).toBeCalledWith(button);
@@ -172,174 +192,188 @@ describe('<BaseButton/>', () => {
   describe('onClick', () => {
     it('should call onClick when clicked', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
+        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).toHaveBeenCalledTimes(1);
       });
     });
     it('should not call onClick when interaction is "disabled"', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         interaction: "disabled",
-        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 disabled is set"', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         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 interaction is "readonly"', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         interaction: "readonly",
-        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 readOnly is set', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         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)(_BaseButton7 || (_BaseButton7 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-        href: "#"
-      }, "Hello World")));
-      const button = _react2.screen.getByRole('link', {
+      (0, _react.render)(_BaseButton7 || (_BaseButton7 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+        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 interaction is "readonly" and an href prop is provided', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         interaction: "readonly",
         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.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         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.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         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 interaction is "disabled" and space key is pressed', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         interaction: "disabled",
         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();
       });
     });
     it('should not call onClick when interaction is "readonly" and space key is pressed', async () => {
       const onClick = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
         interaction: "readonly",
         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();
       });
     });
   });
   describe('when passing down props to View', () => {
     it("passes cursor='pointer' to View by default", async () => {
-      (0, _react2.render)(_BaseButton8 || (_BaseButton8 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, null, "Hello World")));
-      const button = _react2.screen.getByRole('button', {
+      (0, _react.render)(_BaseButton8 || (_BaseButton8 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+        children: "Hello World"
+      })));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       const style = window.getComputedStyle(button);
       expect(style.cursor).toBe('pointer');
     });
     it("passes cursor='not-allowed' to View when disabled", async () => {
-      (0, _react2.render)(_BaseButton9 || (_BaseButton9 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-        interaction: "disabled"
-      }, "Hello World")));
-      const button = _react2.screen.getByRole('button', {
+      (0, _react.render)(_BaseButton9 || (_BaseButton9 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+        interaction: "disabled",
+        children: "Hello World"
+      })));
+      const button = _react.screen.getByRole('button', {
         name: 'Hello World'
       });
       const style = window.getComputedStyle(button);
@@ -349,24 +383,26 @@ describe('<BaseButton/>', () => {
   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.BaseButton, {
-        onClick: onClick
-      }, "Hello World"));
-      const button = _react2.screen.getByRole('button', {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.BaseButton, {
+        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)(_BaseButton10 || (_BaseButton10 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-          interaction: "disabled"
-        }, "Hello World")));
-        const button = _react2.screen.getByRole('button', {
+        (0, _react.render)(_BaseButton10 || (_BaseButton10 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+          interaction: "disabled",
+          children: "Hello World"
+        })));
+        const button = _react.screen.getByRole('button', {
           name: 'Hello World'
         });
         expect(button).toHaveAttribute('disabled');
@@ -374,10 +410,11 @@ describe('<BaseButton/>', () => {
     });
     describe('when readonly', () => {
       it('sets the disabled attribute so that the button is not in tab order', async () => {
-        (0, _react2.render)(_BaseButton11 || (_BaseButton11 = /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
-          interaction: "readonly"
-        }, "Hello World")));
-        const button = _react2.screen.getByRole('button', {
+        (0, _react.render)(_BaseButton11 || (_BaseButton11 = (0, _jsxRuntime.jsx)(_index.BaseButton, {
+          interaction: "readonly",
+          children: "Hello World"
+        })));
+        const button = _react.screen.getByRole('button', {
           name: 'Hello World'
         });
         expect(button).toHaveAttribute('disabled');

package/lib/BaseButton/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.BaseButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _keycode = _interopRequireDefault(require("keycode"));
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
@@ -21,6 +20,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles"];
 var _dec, _dec2, _class, _BaseButton;
 /*
@@ -46,7 +46,6 @@ var _dec, _dec2, _class, _BaseButton;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components/utilities
@@ -169,28 +168,32 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       renderIcon = _this$props6.renderIcon,
       children = _this$props6.children,
       styles = _this$props6.styles;
-    const wrappedChildren = (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.children
-    }, children);
+    const wrappedChildren = (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.children,
+      children: children
+    });
     if (!renderIcon) {
       return wrappedChildren;
     }
     const hasOnlyIconVisible = this.hasOnlyIconVisible;
-    const wrappedIcon = (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
-    }, (0, _callRenderProp.callRenderProp)(renderIcon));
-    const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
-    }, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
-      key: "icon",
-      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
-    }, wrappedIcon), (0, _emotion.jsx)("span", {
-      key: "children",
-      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
-    }, wrappedChildren)];
-    return (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
-    }, flexChildren);
+    const wrappedIcon = (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG,
+      children: (0, _callRenderProp.callRenderProp)(renderIcon)
+    });
+    const flexChildren = hasOnlyIconVisible ? (0, _jsxRuntime.jsxs)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly,
+      children: [wrappedIcon, children]
+    }) : [(0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper,
+      children: wrappedIcon
+    }, "icon"), (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper,
+      children: wrappedChildren
+    }, "children")];
+    return (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout,
+      children: flexChildren
+    });
   }
   render() {
     var _styles$content;
@@ -235,7 +238,8 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
     if (onClick && as && needsZeroTabIndex) {
       tabIndexValue = tabIndex || 0;
     }
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    return (0, _jsxRuntime.jsx)(_View.View, {
+      ...(0, _passthroughProps.passthroughProps)(props),
       as: elementType,
       focusColor: this.focusColor,
       position: "relative",
@@ -256,10 +260,12 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
       css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
-      focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius)
-    }), (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.content
-    }, this.renderChildren()));
+      focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius),
+      children: (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.content,
+        children: this.renderChildren()
+      })
+    });
   }
 }, _BaseButton.displayName = "BaseButton", _BaseButton.componentId = 'BaseButton', _BaseButton.propTypes = _props.propTypes, _BaseButton.allowedProps = _props.allowedProps, _BaseButton.defaultProps = {
   type: 'button',