@instructure/ui-checkbox 10.16.1-snapshot-0 → 10.16.1-snapshot-1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-checkbox
 

package/es/Checkbox/CheckboxFacade/__new-tests__/CheckboxFacade.test.js

@@ -23,12 +23,12 @@ var _CheckboxFacade, _CheckboxFacade2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { CheckboxFacade } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const TEST_TEXT = 'test-text';
 describe('<CheckboxFacade />', () => {
   let consoleWarningMock;
@@ -43,12 +43,16 @@ describe('<CheckboxFacade />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    render(_CheckboxFacade || (_CheckboxFacade = /*#__PURE__*/React.createElement(CheckboxFacade, null, TEST_TEXT)));
+    render(_CheckboxFacade || (_CheckboxFacade = _jsx(CheckboxFacade, {
+      children: TEST_TEXT
+    })));
     const facade = screen.getByText(TEST_TEXT);
     expect(facade).toBeInTheDocument();
   });
   it('should meet a11y standards', async () => {
-    const _render = render(_CheckboxFacade2 || (_CheckboxFacade2 = /*#__PURE__*/React.createElement(CheckboxFacade, null, TEST_TEXT))),
+    const _render = render(_CheckboxFacade2 || (_CheckboxFacade2 = _jsx(CheckboxFacade, {
+        children: TEST_TEXT
+      }))),
       container = _render.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/Checkbox/CheckboxFacade/index.js

@@ -23,14 +23,14 @@ var _dec, _class, _CheckboxFacade, _SVGIcon, _IconCheckMarkSolid;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconCheckMarkSolid } from '@instructure/ui-icons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Checkbox
@@ -54,17 +54,18 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
   renderIcon() {
     if (this.props.indeterminate) {
-      return _SVGIcon || (_SVGIcon = jsx(SVGIcon, {
+      return _SVGIcon || (_SVGIcon = _jsx(SVGIcon, {
         viewBox: "0 0 1920 1920",
-        inline: false
-      }, jsx("rect", {
-        x: "140",
-        y: "820",
-        width: "1640",
-        height: "280"
-      })));
+        inline: false,
+        children: _jsx("rect", {
+          x: "140",
+          y: "820",
+          width: "1640",
+          height: "280"
+        })
+      }));
     } else if (this.props.checked) {
-      return _IconCheckMarkSolid || (_IconCheckMarkSolid = jsx(IconCheckMarkSolid, {
+      return _IconCheckMarkSolid || (_IconCheckMarkSolid = _jsx(IconCheckMarkSolid, {
         inline: false
       }));
     } else {
@@ -75,15 +76,18 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
     const _this$props3 = this.props,
       children = _this$props3.children,
       styles = _this$props3.styles;
-    return jsx("span", {
+    return _jsxs("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
-      ref: this.handleRef
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.facade,
-      "aria-hidden": "true"
-    }, this.renderIcon()), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children));
+      ref: this.handleRef,
+      children: [_jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        "aria-hidden": "true",
+        children: this.renderIcon()
+      }), _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.label,
+        children: children
+      })]
+    });
   }
 }, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.propTypes = propTypes, _CheckboxFacade.allowedProps = allowedProps, _CheckboxFacade.defaultProps = {
   checked: false,

package/es/Checkbox/ToggleFacade/__new-tests__/ToggleFacade.test.js

@@ -23,12 +23,12 @@ var _ToggleFacade, _ToggleFacade2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { ToggleFacade } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const TEST_TEXT = 'test-text';
 describe('<ToggleFacade />', () => {
   let consoleWarningMock;
@@ -43,12 +43,16 @@ describe('<ToggleFacade />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    render(_ToggleFacade || (_ToggleFacade = /*#__PURE__*/React.createElement(ToggleFacade, null, TEST_TEXT)));
+    render(_ToggleFacade || (_ToggleFacade = _jsx(ToggleFacade, {
+      children: TEST_TEXT
+    })));
     const facade = screen.getByText(TEST_TEXT);
     expect(facade).toBeInTheDocument();
   });
   it('should meet a11y standards', async () => {
-    const _render = render(_ToggleFacade2 || (_ToggleFacade2 = /*#__PURE__*/React.createElement(ToggleFacade, null, TEST_TEXT))),
+    const _render = render(_ToggleFacade2 || (_ToggleFacade2 = _jsx(ToggleFacade, {
+        children: TEST_TEXT
+      }))),
       container = _render.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/Checkbox/ToggleFacade/index.js

@@ -23,13 +23,13 @@ var _dec, _class, _ToggleFacade;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Checkbox
@@ -56,11 +56,11 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       styles = _this$props3.styles,
       checked = _this$props3.checked;
     if (checked) {
-      return jsx(IconCheckSolid, {
+      return _jsx(IconCheckSolid, {
         css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
       });
     } else {
-      return jsx(IconXSolid, {
+      return _jsx(IconXSolid, {
         css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
       });
     }
@@ -69,25 +69,30 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     const _this$props4 = this.props,
       children = _this$props4.children,
       styles = _this$props4.styles;
-    return jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children);
+    return _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: children
+    });
   }
   render() {
     const _this$props5 = this.props,
       labelPlacement = _this$props5.labelPlacement,
       styles = _this$props5.styles;
-    return jsx("span", {
+    return _jsxs("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
-      ref: this.handleRef
-    }, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.facade,
-      "aria-hidden": "true"
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.icon
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.iconToggle
-    }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
+      ref: this.handleRef,
+      children: [(labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        "aria-hidden": "true",
+        children: _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.icon,
+          children: _jsx("span", {
+            css: styles === null || styles === void 0 ? void 0 : styles.iconToggle,
+            children: this.renderIcon()
+          })
+        })
+      }), labelPlacement === 'end' && this.renderLabel()]
+    });
   }
 }, _ToggleFacade.displayName = "ToggleFacade", _ToggleFacade.componentId = 'ToggleFacade', _ToggleFacade.propTypes = propTypes, _ToggleFacade.allowedProps = allowedProps, _ToggleFacade.defaultProps = {
   checked: false,

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

@@ -22,13 +22,14 @@
  * SOFTWARE.
  */
 
-import React from 'react';
+import { createRef } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Checkbox } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const TEST_VALUE = 'test-value';
 const TEST_NAME = 'test-name';
 const TEST_LABEL = 'test-label';
@@ -43,7 +44,9 @@ const renderCheckbox = props => {
     ...initProps,
     ...props
   };
-  return render(/*#__PURE__*/React.createElement(Checkbox, allProps));
+  return render(_jsx(Checkbox, {
+    ...allProps
+  }));
 };
 describe('<Checkbox />', () => {
   let consoleWarningMock;
@@ -168,10 +171,11 @@ describe('<Checkbox />', () => {
     });
     it('focuses with the focus helper', () => {
       var _checkboxRef$current;
-      const checkboxRef = /*#__PURE__*/React.createRef();
-      render(/*#__PURE__*/React.createElement(Checkbox, Object.assign({
-        ref: checkboxRef
-      }, initProps)));
+      const checkboxRef = /*#__PURE__*/createRef();
+      render(_jsx(Checkbox, {
+        ref: checkboxRef,
+        ...initProps
+      }));
       const checkboxElement = screen.getByRole('checkbox');
       expect(checkboxElement).not.toHaveFocus();
       (_checkboxRef$current = checkboxRef.current) === null || _checkboxRef$current === void 0 ? void 0 : _checkboxRef$current.focus();

package/es/Checkbox/index.js

@@ -23,8 +23,7 @@ var _dec, _dec2, _dec3, _class, _Checkbox;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import keycode from 'keycode';
 import { FormFieldMessages } from '@instructure/ui-form-field';
 import { createChainedFunction } from '@instructure/ui-utils';
@@ -33,12 +32,13 @@ import { isActiveElement } from '@instructure/ui-dom-utils';
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { CheckboxFacade } from './CheckboxFacade';
 import { ToggleFacade } from './ToggleFacade';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -161,7 +161,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       focused = _this$state.focused;
     error(!(variant === 'simple' && labelPlacement !== 'end'), `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`);
     if (variant === 'toggle') {
-      return jsx(ToggleFacade, {
+      return _jsxs(ToggleFacade, {
         disabled: disabled,
         size: size,
         focused: focused,
@@ -169,24 +169,28 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         readOnly: readOnly,
         labelPlacement: labelPlacement,
         themeOverride: themeOverride,
-        invalid: this.invalid
-      }, label, isRequired && label && jsx("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
-        "aria-hidden": true
-      }, ' ', "*"));
+        invalid: this.invalid,
+        children: [label, isRequired && label && _jsxs("span", {
+          css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+          "aria-hidden": true,
+          children: [' ', "*"]
+        })]
+      });
     } else {
-      return jsx(CheckboxFacade, {
+      return _jsxs(CheckboxFacade, {
         size: size,
         hovered: hovered,
         focused: focused,
         checked: this.checked,
         indeterminate: indeterminate,
         themeOverride: themeOverride,
-        invalid: this.invalid
-      }, label, isRequired && label && jsx("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
-        "aria-hidden": true
-      }, ' ', "*"));
+        invalid: this.invalid,
+        children: [label, isRequired && label && _jsxs("span", {
+          css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+          "aria-hidden": true,
+          children: [' ', "*"]
+        })]
+      });
     }
   }
   renderMessages() {
@@ -194,13 +198,14 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       messages = _this$props5.messages,
       styles = _this$props5.styles,
       variant = _this$props5.variant;
-    return messages && messages.length > 0 ? jsx(View, {
+    return messages && messages.length > 0 ? _jsx(View, {
       display: "block",
       margin: "small 0 0",
-      css: this.isNewError && (variant === 'toggle' ? styles === null || styles === void 0 ? void 0 : styles.indentedToggleError : styles === null || styles === void 0 ? void 0 : styles.indentedError)
-    }, jsx(FormFieldMessages, {
-      messages: messages
-    })) : null;
+      css: this.isNewError && (variant === 'toggle' ? styles === null || styles === void 0 ? void 0 : styles.indentedToggleError : styles === null || styles === void 0 ? void 0 : styles.indentedError),
+      children: _jsx(FormFieldMessages, {
+        messages: messages
+      })
+    }) : null;
   }
   render() {
     const _this$props6 = this.props,
@@ -218,35 +223,39 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       isRequired = _this$props6.isRequired;
     const props = omitProps(this.props, Checkbox.allowedProps);
     error(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
-    return jsx("div", {
+    return _jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.checkbox
       /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
       onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver)
       /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
       onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut),
-      ref: this.handleRef
-    }, jsx("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.container
-    }, jsx("input", Object.assign({}, props, {
-      id: this.id,
-      value: value,
-      type: "checkbox",
-      ref: c => {
-        this._input = c;
-      },
-      required: isRequired,
-      disabled: disabled || readOnly,
-      "aria-checked": indeterminate ? 'mixed' : void 0,
-      css: styles === null || styles === void 0 ? void 0 : styles.input,
-      onChange: this.handleChange,
-      onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
-      onFocus: createChainedFunction(onFocus, this.handleFocus),
-      onBlur: createChainedFunction(onBlur, this.handleBlur),
-      checked: this.checked
-    })), jsx("label", {
-      htmlFor: this.id,
-      css: styles === null || styles === void 0 ? void 0 : styles.control
-    }, this.renderFacade(), this.renderMessages())));
+      ref: this.handleRef,
+      children: _jsxs("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        children: [_jsx("input", {
+          ...props,
+          id: this.id,
+          value: value,
+          type: "checkbox",
+          ref: c => {
+            this._input = c;
+          },
+          required: isRequired,
+          disabled: disabled || readOnly,
+          "aria-checked": indeterminate ? 'mixed' : void 0,
+          css: styles === null || styles === void 0 ? void 0 : styles.input,
+          onChange: this.handleChange,
+          onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
+          onFocus: createChainedFunction(onFocus, this.handleFocus),
+          onBlur: createChainedFunction(onBlur, this.handleBlur),
+          checked: this.checked
+        }), _jsxs("label", {
+          htmlFor: this.id,
+          css: styles === null || styles === void 0 ? void 0 : styles.control,
+          children: [this.renderFacade(), this.renderMessages()]
+        })]
+      })
+    });
   }
 }, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.propTypes = propTypes, _Checkbox.allowedProps = allowedProps, _Checkbox.defaultProps = {
   size: 'medium',

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

@@ -23,7 +23,6 @@ var _Checkbox, _Checkbox2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
@@ -31,6 +30,7 @@ import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { CheckboxGroup } from '../index';
 import { Checkbox } from '../../Checkbox';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const TEST_NAME = 'test-name';
 const TEST_DESCRIPTION = 'test-description';
 const TEST_ERROR_MESSAGE = 'test-error-message';
@@ -44,13 +44,16 @@ const renderCheckboxGroup = props => {
     description: TEST_DESCRIPTION,
     ...props
   };
-  return render(/*#__PURE__*/React.createElement(CheckboxGroup, allProps, _Checkbox || (_Checkbox = /*#__PURE__*/React.createElement(Checkbox, {
-    label: TEST_LABEL_1,
-    value: TEST_VALUE_1
-  })), _Checkbox2 || (_Checkbox2 = /*#__PURE__*/React.createElement(Checkbox, {
-    label: TEST_LABEL_2,
-    value: TEST_VALUE_2
-  }))));
+  return render(_jsxs(CheckboxGroup, {
+    ...allProps,
+    children: [_Checkbox || (_Checkbox = _jsx(Checkbox, {
+      label: TEST_LABEL_1,
+      value: TEST_VALUE_1
+    })), _Checkbox2 || (_Checkbox2 = _jsx(Checkbox, {
+      label: TEST_LABEL_2,
+      value: TEST_VALUE_2
+    }))]
+  }));
 };
 describe('<CheckboxGroup />', () => {
   let consoleWarningMock;

package/es/CheckboxGroup/index.js

@@ -23,12 +23,13 @@ var _dec, _dec2, _class, _CheckboxGroup;
  * SOFTWARE.
  */
 
-import React, { Children, Component } from 'react';
+import { Children, Component } from 'react';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { matchComponentTypes, safeCloneElement, pickProps, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Checkbox } from '../Checkbox';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -102,13 +103,16 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_cla
     });
   }
   render() {
-    return /*#__PURE__*/React.createElement(FormFieldGroup, Object.assign({}, omitProps(this.props, CheckboxGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
+    return _jsx(FormFieldGroup, {
+      ...omitProps(this.props, CheckboxGroup.allowedProps),
+      ...pickProps(this.props, FormFieldGroup.allowedProps),
       description: this.props.description,
       rowSpacing: "small",
       vAlign: "top",
       messagesId: this._messagesId,
-      elementRef: this.handleRef
-    }), this.renderChildren());
+      elementRef: this.handleRef,
+      children: this.renderChildren()
+    });
   }
 }, _CheckboxGroup.displayName = "CheckboxGroup", _CheckboxGroup.componentId = 'CheckboxGroup', _CheckboxGroup.propTypes = propTypes, _CheckboxGroup.allowedProps = allowedProps, _CheckboxGroup.defaultProps = {
   disabled: false,

package/lib/Checkbox/CheckboxFacade/__new-tests__/CheckboxFacade.test.js

@@ -1,12 +1,11 @@
 "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");
 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 _CheckboxFacade, _CheckboxFacade2;
 /*
  * The MIT License (MIT)
@@ -45,12 +44,16 @@ describe('<CheckboxFacade />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    (0, _react2.render)(_CheckboxFacade || (_CheckboxFacade = /*#__PURE__*/_react.default.createElement(_index.CheckboxFacade, null, TEST_TEXT)));
-    const facade = _react2.screen.getByText(TEST_TEXT);
+    (0, _react.render)(_CheckboxFacade || (_CheckboxFacade = (0, _jsxRuntime.jsx)(_index.CheckboxFacade, {
+      children: TEST_TEXT
+    })));
+    const facade = _react.screen.getByText(TEST_TEXT);
     expect(facade).toBeInTheDocument();
   });
   it('should meet a11y standards', async () => {
-    const _render = (0, _react2.render)(_CheckboxFacade2 || (_CheckboxFacade2 = /*#__PURE__*/_react.default.createElement(_index.CheckboxFacade, null, TEST_TEXT))),
+    const _render = (0, _react.render)(_CheckboxFacade2 || (_CheckboxFacade2 = (0, _jsxRuntime.jsx)(_index.CheckboxFacade, {
+        children: TEST_TEXT
+      }))),
       container = _render.container;
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     expect(axeCheck).toBe(true);

package/lib/Checkbox/CheckboxFacade/index.js

@@ -12,6 +12,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");
 var _dec, _class, _CheckboxFacade, _SVGIcon, _IconCheckMarkSolid;
 /*
  * The MIT License (MIT)
@@ -36,7 +37,6 @@ var _dec, _class, _CheckboxFacade, _SVGIcon, _IconCheckMarkSolid;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Checkbox
@@ -60,17 +60,18 @@ let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_s
   }
   renderIcon() {
     if (this.props.indeterminate) {
-      return _SVGIcon || (_SVGIcon = (0, _emotion.jsx)(_SVGIcon2.SVGIcon, {
+      return _SVGIcon || (_SVGIcon = (0, _jsxRuntime.jsx)(_SVGIcon2.SVGIcon, {
         viewBox: "0 0 1920 1920",
-        inline: false
-      }, (0, _emotion.jsx)("rect", {
-        x: "140",
-        y: "820",
-        width: "1640",
-        height: "280"
-      })));
+        inline: false,
+        children: (0, _jsxRuntime.jsx)("rect", {
+          x: "140",
+          y: "820",
+          width: "1640",
+          height: "280"
+        })
+      }));
     } else if (this.props.checked) {
-      return _IconCheckMarkSolid || (_IconCheckMarkSolid = (0, _emotion.jsx)(_IconCheckMarkSolid2.IconCheckMarkSolid, {
+      return _IconCheckMarkSolid || (_IconCheckMarkSolid = (0, _jsxRuntime.jsx)(_IconCheckMarkSolid2.IconCheckMarkSolid, {
         inline: false
       }));
     } else {
@@ -81,15 +82,18 @@ let CheckboxFacade = exports.CheckboxFacade = (_dec = (0, _emotion.withStyle)(_s
     const _this$props3 = this.props,
       children = _this$props3.children,
       styles = _this$props3.styles;
-    return (0, _emotion.jsx)("span", {
+    return (0, _jsxRuntime.jsxs)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
-      ref: this.handleRef
-    }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.facade,
-      "aria-hidden": "true"
-    }, this.renderIcon()), (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children));
+      ref: this.handleRef,
+      children: [(0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.facade,
+        "aria-hidden": "true",
+        children: this.renderIcon()
+      }), (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.label,
+        children: children
+      })]
+    });
   }
 }, _CheckboxFacade.displayName = "CheckboxFacade", _CheckboxFacade.componentId = 'CheckboxFacade', _CheckboxFacade.propTypes = _props.propTypes, _CheckboxFacade.allowedProps = _props.allowedProps, _CheckboxFacade.defaultProps = {
   checked: false,

package/lib/Checkbox/ToggleFacade/__new-tests__/ToggleFacade.test.js

@@ -1,12 +1,11 @@
 "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");
 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 _ToggleFacade, _ToggleFacade2;
 /*
  * The MIT License (MIT)
@@ -45,12 +44,16 @@ describe('<ToggleFacade />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    (0, _react2.render)(_ToggleFacade || (_ToggleFacade = /*#__PURE__*/_react.default.createElement(_index.ToggleFacade, null, TEST_TEXT)));
-    const facade = _react2.screen.getByText(TEST_TEXT);
+    (0, _react.render)(_ToggleFacade || (_ToggleFacade = (0, _jsxRuntime.jsx)(_index.ToggleFacade, {
+      children: TEST_TEXT
+    })));
+    const facade = _react.screen.getByText(TEST_TEXT);
     expect(facade).toBeInTheDocument();
   });
   it('should meet a11y standards', async () => {
-    const _render = (0, _react2.render)(_ToggleFacade2 || (_ToggleFacade2 = /*#__PURE__*/_react.default.createElement(_index.ToggleFacade, null, TEST_TEXT))),
+    const _render = (0, _react.render)(_ToggleFacade2 || (_ToggleFacade2 = (0, _jsxRuntime.jsx)(_index.ToggleFacade, {
+        children: TEST_TEXT
+      }))),
       container = _render.container;
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     expect(axeCheck).toBe(true);