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

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

@@ -23,30 +23,33 @@ var _circle, _CondensedButton, _CondensedButton2, _CondensedButton3, _CondensedB
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CondensedButton } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<CondensedButton/>', () => {
   var _CondensedButton8;
-  const icon = /*#__PURE__*/React.createElement("svg", {
+  const icon = _jsx("svg", {
     "data-title": "myIcon",
     height: "1em",
     width: "1em",
     style: {
       fill: 'currentcolor'
-    }
-  }, _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: "0.5em",
-    cy: "0.5em",
-    r: "0.5em"
-  })));
+    },
+    children: _circle || (_circle = _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';
-    render(/*#__PURE__*/React.createElement(CondensedButton, null, children));
+    render(_jsx(CondensedButton, {
+      children: children
+    }));
     const button = document.querySelector('button');
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent(children);
@@ -54,11 +57,12 @@ describe('<CondensedButton/>', () => {
   it('should provide a focused getter', () => {
     var _componentRef;
     let componentRef;
-    render(/*#__PURE__*/React.createElement(CondensedButton, {
+    render(_jsx(CondensedButton, {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
+      },
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -68,11 +72,12 @@ describe('<CondensedButton/>', () => {
   it('should provide a focus function', () => {
     var _componentRef2;
     let componentRef;
-    render(/*#__PURE__*/React.createElement(CondensedButton, {
+    render(_jsx(CondensedButton, {
       ref: component => {
         componentRef = component;
-      }
-    }, "Hello"));
+      },
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -80,9 +85,10 @@ describe('<CondensedButton/>', () => {
     expect(document.activeElement).toBe(button);
   });
   it('should pass the type attribute', () => {
-    render(_CondensedButton || (_CondensedButton = /*#__PURE__*/React.createElement(CondensedButton, {
-      type: "submit"
-    }, "Hello")));
+    render(_CondensedButton || (_CondensedButton = _jsx(CondensedButton, {
+      type: "submit",
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
@@ -91,18 +97,20 @@ describe('<CondensedButton/>', () => {
   });
   it('should pass the `elementRef` prop', async () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(CondensedButton, {
-      elementRef: elementRef
-    }, "Hello"));
+    render(_jsx(CondensedButton, {
+      elementRef: elementRef,
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(elementRef).toHaveBeenCalledWith(button);
   });
   it('should pass the `as` prop', () => {
-    const _render = render(_CondensedButton2 || (_CondensedButton2 = /*#__PURE__*/React.createElement(CondensedButton, {
-        as: "li"
-      }, "Hello"))),
+    const _render = render(_CondensedButton2 || (_CondensedButton2 = _jsx(CondensedButton, {
+        as: "li",
+        children: "Hello"
+      }))),
       container = _render.container;
     const button = container.querySelector('[type="button"]');
     expect(button).toBeInTheDocument();
@@ -110,45 +118,50 @@ describe('<CondensedButton/>', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` is set to disabled', () => {
-    render(_CondensedButton3 || (_CondensedButton3 = /*#__PURE__*/React.createElement(CondensedButton, {
-      interaction: "disabled"
-    }, "Hello")));
+    render(_CondensedButton3 || (_CondensedButton3 = _jsx(CondensedButton, {
+      interaction: "disabled",
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `disabled` is set', () => {
-    render(_CondensedButton4 || (_CondensedButton4 = /*#__PURE__*/React.createElement(CondensedButton, {
-      disabled: true
-    }, "Hello")));
+    render(_CondensedButton4 || (_CondensedButton4 = _jsx(CondensedButton, {
+      disabled: true,
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `interaction` is set to readonly', () => {
-    render(_CondensedButton5 || (_CondensedButton5 = /*#__PURE__*/React.createElement(CondensedButton, {
-      interaction: "readonly"
-    }, "Hello")));
+    render(_CondensedButton5 || (_CondensedButton5 = _jsx(CondensedButton, {
+      interaction: "readonly",
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `readOnly` is set', () => {
-    render(_CondensedButton6 || (_CondensedButton6 = /*#__PURE__*/React.createElement(CondensedButton, {
-      readOnly: true
-    }, "Hello")));
+    render(_CondensedButton6 || (_CondensedButton6 = _jsx(CondensedButton, {
+      readOnly: true,
+      children: "Hello"
+    })));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });
     expect(button).toHaveAttribute('disabled');
   });
   it('should pass the `href` prop', () => {
-    render(_CondensedButton7 || (_CondensedButton7 = /*#__PURE__*/React.createElement(CondensedButton, {
-      href: "#"
-    }, "Hello")));
+    render(_CondensedButton7 || (_CondensedButton7 = _jsx(CondensedButton, {
+      href: "#",
+      children: "Hello"
+    })));
     const linkButton = screen.getByRole('link', {
       name: 'Hello'
     });
@@ -156,9 +169,10 @@ describe('<CondensedButton/>', () => {
     expect(linkButton).toHaveAttribute('href', '#');
   });
   it('should pass the `renderIcon` prop', async () => {
-    render(_CondensedButton8 || (_CondensedButton8 = /*#__PURE__*/React.createElement(CondensedButton, {
-      renderIcon: icon
-    }, "Hello")));
+    render(_CondensedButton8 || (_CondensedButton8 = _jsx(CondensedButton, {
+      renderIcon: icon,
+      children: "Hello"
+    })));
     const svgIcon = document.querySelector(iconSelector);
     const button = screen.getByRole('button', {
       name: 'Hello'
@@ -168,9 +182,10 @@ describe('<CondensedButton/>', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(CondensedButton, {
-      onClick: onClick
-    }, "Hello"));
+    render(_jsx(CondensedButton, {
+      onClick: onClick,
+      children: "Hello"
+    }));
     const button = screen.getByRole('button', {
       name: 'Hello'
     });

package/es/CondensedButton/index.js

@@ -25,13 +25,14 @@ var _dec, _dec2, _class, _CondensedButton;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { withStyle } from '@instructure/emotion';
 import generateComponentTheme from './theme';
 import { BaseButton } from '../BaseButton';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -72,7 +73,8 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
       renderIcon = _this$props.renderIcon,
       props = _objectWithoutProperties(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
-    return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, passthroughProps(props), {
+    return _jsx(BaseButton, {
+      ...passthroughProps(props),
       isCondensed: true,
       withBackground: false,
       withBorder: false,
@@ -89,8 +91,9 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
       themeOverride: themeOverride,
       ref: component => {
         this._baseButton = component;
-      }
-    }), children);
+      },
+      children: children
+    });
   }
 }, _CondensedButton.displayName = "CondensedButton", _CondensedButton.componentId = 'CondensedButton', _CondensedButton.propTypes = propTypes, _CondensedButton.allowedProps = allowedProps, _CondensedButton.defaultProps = {
   type: 'button',

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

@@ -23,31 +23,33 @@ var _circle;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { IconButton } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<IconButton/>', () => {
   var _IconButton, _IconButton2, _IconButton3, _IconButton4, _IconButton5, _IconButton6, _IconButton7, _IconButton8, _IconButton9;
-  const icon = /*#__PURE__*/React.createElement("svg", {
+  const icon = _jsx("svg", {
     "data-title": "myIcon",
     height: "1em",
     width: "1em",
     style: {
       fill: 'currentcolor'
-    }
-  }, _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: "0.5em",
-    cy: "0.5em",
-    r: "0.5em"
-  })));
+    },
+    children: _circle || (_circle = _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', () => {
-    render(_IconButton || (_IconButton = /*#__PURE__*/React.createElement(IconButton, {
-      screenReaderLabel: "some action"
-    }, icon)));
+    render(_IconButton || (_IconButton = _jsx(IconButton, {
+      screenReaderLabel: "some action",
+      children: icon
+    })));
     const svgIcon = document.querySelector(iconSelector);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
@@ -55,7 +57,7 @@ describe('<IconButton/>', () => {
     expect(button).toHaveTextContent('some action');
   });
   it('should render an icon when provided as the `renderIcon` prop', () => {
-    render(_IconButton2 || (_IconButton2 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton2 || (_IconButton2 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon
     })));
@@ -67,7 +69,7 @@ describe('<IconButton/>', () => {
   it('should provide a focused getter', () => {
     var _componentRef;
     let componentRef;
-    render(/*#__PURE__*/React.createElement(IconButton, {
+    render(_jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       ref: component => {
@@ -81,7 +83,7 @@ describe('<IconButton/>', () => {
   it('should provide a focus function', () => {
     var _componentRef2;
     let componentRef;
-    render(/*#__PURE__*/React.createElement(IconButton, {
+    render(_jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       ref: component => {
@@ -93,7 +95,7 @@ describe('<IconButton/>', () => {
     expect(document.activeElement).toBe(button);
   });
   it('should pass the `href` prop', () => {
-    render(_IconButton3 || (_IconButton3 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton3 || (_IconButton3 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       href: "#"
@@ -103,7 +105,7 @@ describe('<IconButton/>', () => {
     expect(linkButton).toHaveAttribute('href', '#');
   });
   it('should pass the `type` prop', () => {
-    render(_IconButton4 || (_IconButton4 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton4 || (_IconButton4 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       type: "reset"
@@ -114,7 +116,7 @@ describe('<IconButton/>', () => {
   });
   it('should pass the `elementRef` prop', () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(IconButton, {
+    render(_jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       elementRef: elementRef
@@ -123,7 +125,7 @@ describe('<IconButton/>', () => {
     expect(elementRef).toHaveBeenCalledWith(button);
   });
   it('should pass the `as` prop', () => {
-    const _render = render(_IconButton5 || (_IconButton5 = /*#__PURE__*/React.createElement(IconButton, {
+    const _render = render(_IconButton5 || (_IconButton5 = _jsx(IconButton, {
         screenReaderLabel: "some action",
         renderIcon: icon,
         as: "li"
@@ -135,7 +137,7 @@ describe('<IconButton/>', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` is set to disabled', () => {
-    render(_IconButton6 || (_IconButton6 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton6 || (_IconButton6 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       interaction: "disabled"
@@ -144,7 +146,7 @@ describe('<IconButton/>', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `disabled` is set', () => {
-    render(_IconButton7 || (_IconButton7 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton7 || (_IconButton7 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       disabled: true
@@ -153,7 +155,7 @@ describe('<IconButton/>', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `interaction` is set to readonly', () => {
-    render(_IconButton8 || (_IconButton8 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton8 || (_IconButton8 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       interaction: "readonly"
@@ -162,7 +164,7 @@ describe('<IconButton/>', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `readOnly` is set', () => {
-    render(_IconButton9 || (_IconButton9 = /*#__PURE__*/React.createElement(IconButton, {
+    render(_IconButton9 || (_IconButton9 = _jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       readOnly: true
@@ -172,7 +174,7 @@ describe('<IconButton/>', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(IconButton, {
+    render(_jsx(IconButton, {
       screenReaderLabel: "some action",
       renderIcon: icon,
       onClick: onClick

package/es/IconButton/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _IconButton;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -33,6 +33,7 @@ import { withStyle } from '@instructure/emotion';
 import generateComponentTheme from './theme';
 import { BaseButton } from '../BaseButton';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -78,7 +79,8 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
       href = _this$props.href,
       props = _objectWithoutProperties(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
-    return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, passthroughProps(props), {
+    return _jsx(BaseButton, {
+      ...passthroughProps(props),
       type: type,
       size: size,
       elementRef: this.handleRef,
@@ -96,8 +98,11 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
       themeOverride: themeOverride,
       ref: component => {
         this._baseButton = component;
-      }
-    }), /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderLabel));
+      },
+      children: _jsx(ScreenReaderContent, {
+        children: screenReaderLabel
+      })
+    });
   }
 }, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.propTypes = propTypes, _IconButton.allowedProps = allowedProps, _IconButton.defaultProps = {
   type: 'button',

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

@@ -23,26 +23,27 @@ var _svg;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { ToggleButton } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<ToggleButton />', () => {
   var _ToggleButton, _ToggleButton2, _ToggleButton3, _ToggleButton4, _ToggleButton5, _ToggleButton6, _ToggleButton7, _ToggleButton8, _ToggleButton9;
-  const icon = _svg || (_svg = /*#__PURE__*/React.createElement("svg", {
+  const icon = _svg || (_svg = _jsx("svg", {
     "data-title": "myIcon",
     height: "1em",
-    width: "1em"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "0.5em",
-    cy: "0.5em",
-    r: "0.5em"
-  })));
+    width: "1em",
+    children: _jsx("circle", {
+      cx: "0.5em",
+      cy: "0.5em",
+      r: "0.5em"
+    })
+  }));
   const iconSelector = 'svg[data-title="myIcon"]';
   it('should render', () => {
-    render(_ToggleButton || (_ToggleButton = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton || (_ToggleButton = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -58,7 +59,7 @@ describe('<ToggleButton />', () => {
     expect(tooltip).toHaveTextContent('This is tooltip content');
   });
   it('should set `aria-pressed` to `true` if `status` is `pressed`', () => {
-    render(_ToggleButton2 || (_ToggleButton2 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton2 || (_ToggleButton2 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -68,7 +69,7 @@ describe('<ToggleButton />', () => {
     expect(button).toHaveAttribute('aria-pressed', 'true');
   });
   it('should set `aria-pressed` to `false` if `status` is `unpressed`', () => {
-    render(_ToggleButton3 || (_ToggleButton3 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton3 || (_ToggleButton3 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -78,7 +79,7 @@ describe('<ToggleButton />', () => {
     expect(button).toHaveAttribute('aria-pressed', 'false');
   });
   it('should render an icon', () => {
-    render(_ToggleButton4 || (_ToggleButton4 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton4 || (_ToggleButton4 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -90,7 +91,7 @@ describe('<ToggleButton />', () => {
     expect(svgIcon).toBeInTheDocument();
   });
   it('should pass the `as` prop', () => {
-    const _render = render(_ToggleButton5 || (_ToggleButton5 = /*#__PURE__*/React.createElement(ToggleButton, {
+    const _render = render(_ToggleButton5 || (_ToggleButton5 = _jsx(ToggleButton, {
         screenReaderLabel: "This is a screen reader label",
         renderIcon: icon,
         renderTooltipContent: "This is tooltip content",
@@ -103,7 +104,7 @@ describe('<ToggleButton />', () => {
     expect(button.tagName).toBe('LI');
   });
   it('should set the disabled attribute when `interaction` prop is set to disabled', () => {
-    render(_ToggleButton6 || (_ToggleButton6 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton6 || (_ToggleButton6 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -114,7 +115,7 @@ describe('<ToggleButton />', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `disabled` prop is set', () => {
-    render(_ToggleButton7 || (_ToggleButton7 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton7 || (_ToggleButton7 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -125,7 +126,7 @@ describe('<ToggleButton />', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `interaction` prop is set to readonly', () => {
-    render(_ToggleButton8 || (_ToggleButton8 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton8 || (_ToggleButton8 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -136,7 +137,7 @@ describe('<ToggleButton />', () => {
     expect(button).toHaveAttribute('disabled');
   });
   it('should set the disabled attribute when `readOnly` prop is set', () => {
-    render(_ToggleButton9 || (_ToggleButton9 = /*#__PURE__*/React.createElement(ToggleButton, {
+    render(_ToggleButton9 || (_ToggleButton9 = _jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",
@@ -148,7 +149,7 @@ describe('<ToggleButton />', () => {
   });
   it('should pass the `onClick` prop', async () => {
     const onClick = vi.fn();
-    render(/*#__PURE__*/React.createElement(ToggleButton, {
+    render(_jsx(ToggleButton, {
       screenReaderLabel: "This is a screen reader label",
       renderIcon: icon,
       renderTooltipContent: "This is tooltip content",

package/es/ToggleButton/index.js

@@ -25,12 +25,13 @@ var _dec, _class, _ToggleButton;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { IconButton } from '../IconButton';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -68,7 +69,7 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_ToggleButton = class Togg
       placement = _this$props.placement,
       onClick = _this$props.onClick,
       props = _objectWithoutProperties(_this$props, _excluded);
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return _jsx(Tooltip, {
       renderTip: renderTooltipContent,
       on: ['hover', 'focus'],
       placement: placement,
@@ -85,19 +86,22 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_ToggleButton = class Togg
         });
       },
       mountNode: mountNode,
-      elementRef: el => this.ref = el
-    }, /*#__PURE__*/React.createElement(IconButton, Object.assign({}, passthroughProps(props), {
-      screenReaderLabel: screenReaderLabel,
-      withBackground: false,
-      withBorder: false,
-      color: color,
-      size: size,
-      elementRef: this.handleRef,
-      as: as,
-      onClick: onClick,
-      interaction: interaction,
-      "aria-pressed": status === 'pressed'
-    }), callRenderProp(renderIcon)));
+      elementRef: el => this.ref = el,
+      children: _jsx(IconButton, {
+        ...passthroughProps(props),
+        screenReaderLabel: screenReaderLabel,
+        withBackground: false,
+        withBorder: false,
+        color: color,
+        size: size,
+        elementRef: this.handleRef,
+        as: as,
+        onClick: onClick,
+        interaction: interaction,
+        "aria-pressed": status === 'pressed',
+        children: callRenderProp(renderIcon)
+      })
+    });
   }
 }, _ToggleButton.displayName = "ToggleButton", _ToggleButton.componentId = 'ToggleButton', _ToggleButton.propTypes = propTypes, _ToggleButton.allowedProps = allowedProps, _ToggleButton.defaultProps = {
   size: 'medium',