@instructure/ui-form-field 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-form-field
 

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

@@ -23,13 +23,13 @@ var _FormField, _FormField2, _FormField3, _FormField4;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import { FormField } from '../index';
 import { userEvent } from '@testing-library/user-event';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<FormField />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -43,7 +43,7 @@ describe('<FormField />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    render(_FormField || (_FormField = /*#__PURE__*/React.createElement(FormField, {
+    render(_FormField || (_FormField = _jsx(FormField, {
       label: "foo",
       id: "bar"
     })));
@@ -51,7 +51,7 @@ describe('<FormField />', () => {
     expect(formField).toBeInTheDocument();
   });
   it('passes props through to FormField', () => {
-    render(_FormField2 || (_FormField2 = /*#__PURE__*/React.createElement(FormField, {
+    render(_FormField2 || (_FormField2 = _jsx(FormField, {
       label: "foo",
       id: "bar",
       "data-automation": "baz"
@@ -60,7 +60,7 @@ describe('<FormField />', () => {
     expect(formField).toHaveAttribute('data-automation', 'baz');
   });
   it('should meet a11y standards', async () => {
-    const _render = render(_FormField3 || (_FormField3 = /*#__PURE__*/React.createElement(FormField, {
+    const _render = render(_FormField3 || (_FormField3 = _jsx(FormField, {
         label: "foo",
         id: "bar"
       }))),
@@ -70,12 +70,13 @@ describe('<FormField />', () => {
   });
   it('should focus the control with the supplied id', async () => {
     const user = userEvent.setup();
-    render(_FormField4 || (_FormField4 = /*#__PURE__*/React.createElement(FormField, {
+    render(_FormField4 || (_FormField4 = _jsxs(FormField, {
       label: "labelText",
-      id: "foo"
-    }, /*#__PURE__*/React.createElement("input", null), /*#__PURE__*/React.createElement("input", {
-      id: "foo"
-    }), /*#__PURE__*/React.createElement("input", null))));
+      id: "foo",
+      children: [_jsx("input", {}), _jsx("input", {
+        id: "foo"
+      }), _jsx("input", {})]
+    })));
     const label = screen.getByText('labelText').closest('label');
     await user.click(label);
     const input = document.getElementById('foo');

package/es/FormField/index.js

@@ -22,10 +22,11 @@
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { omitProps, pickProps } from '@instructure/ui-react-utils';
 import { FormFieldLayout } from '../FormFieldLayout';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -44,7 +45,9 @@ class FormField extends Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
+    return _jsx(FormFieldLayout, {
+      ...omitProps(this.props, FormField.allowedProps),
+      ...pickProps(this.props, FormFieldLayout.allowedProps),
       label: this.props.label,
       vAlign: this.props.vAlign,
       as: "label"
@@ -55,7 +58,7 @@ class FormField extends Component {
       htmlFor: this.props.id,
       elementRef: this.handleRef,
       margin: this.props.margin
-    }));
+    });
   }
 }
 FormField.displayName = "FormField";

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

@@ -23,12 +23,12 @@ var _FormFieldGroup, _label, _label2, _label3, _label4, _label5, _label6, _label
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import { FormFieldGroup } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<FormFieldGroup />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,9 +42,16 @@ describe('<FormFieldGroup />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    const _render = render(_FormFieldGroup || (_FormFieldGroup = /*#__PURE__*/React.createElement(FormFieldGroup, {
-        description: "Please enter your full name"
-      }, /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+    const _render = render(_FormFieldGroup || (_FormFieldGroup = _jsxs(FormFieldGroup, {
+        description: "Please enter your full name",
+        children: [_jsxs("label", {
+          children: ["First: ", _jsx("input", {})]
+        }), _jsxs("label", {
+          children: ["Middle: ", _jsx("input", {})]
+        }), _jsxs("label", {
+          children: ["Last: ", _jsx("input", {})]
+        })]
+      }))),
       container = _render.container;
     const formFieldGroup = container.querySelector("span[class$='-formFieldLayout__label']");
     const firstNameInput = screen.getByLabelText('First:');
@@ -57,12 +64,13 @@ describe('<FormFieldGroup />', () => {
     expect(lastNameInput).toBeInTheDocument();
   });
   it('can handle null children', () => {
-    const children = [_label || (_label = /*#__PURE__*/React.createElement("label", {
-      key: "first"
-    }, "First: ", /*#__PURE__*/React.createElement("input", null))), null];
-    const _render2 = render(/*#__PURE__*/React.createElement(FormFieldGroup, {
-        description: "Please enter your full name"
-      }, children)),
+    const children = [_label || (_label = _jsxs("label", {
+      children: ["First: ", _jsx("input", {})]
+    }, "first")), null];
+    const _render2 = render(_jsx(FormFieldGroup, {
+        description: "Please enter your full name",
+        children: children
+      })),
       container = _render2.container;
     const formFieldGroup = container.querySelector('label');
     expect(formFieldGroup).toBeInTheDocument();
@@ -72,10 +80,17 @@ describe('<FormFieldGroup />', () => {
       text: 'Invalid name',
       type: 'error'
     }];
-    const _render3 = render(/*#__PURE__*/React.createElement(FormFieldGroup, {
+    const _render3 = render(_jsxs(FormFieldGroup, {
         description: "Please enter your full name",
-        messages: messages
-      }, _label2 || (_label2 = /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null))), _label3 || (_label3 = /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null))), _label4 || (_label4 = /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+        messages: messages,
+        children: [_label2 || (_label2 = _jsxs("label", {
+          children: ["First: ", _jsx("input", {})]
+        })), _label3 || (_label3 = _jsxs("label", {
+          children: ["Middle: ", _jsx("input", {})]
+        })), _label4 || (_label4 = _jsxs("label", {
+          children: ["Last: ", _jsx("input", {})]
+        }))]
+      })),
       container = _render3.container;
     const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
     const message = container.querySelector("span[id^='FormFieldLayout_']");
@@ -88,18 +103,32 @@ describe('<FormFieldGroup />', () => {
   });
   it('displays description message inside the label', () => {
     const description = 'Please enter your full name';
-    const _render4 = render(/*#__PURE__*/React.createElement(FormFieldGroup, {
-        description: description
-      }, _label5 || (_label5 = /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null))), _label6 || (_label6 = /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null))), _label7 || (_label7 = /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+    const _render4 = render(_jsxs(FormFieldGroup, {
+        description: description,
+        children: [_label5 || (_label5 = _jsxs("label", {
+          children: ["First: ", _jsx("input", {})]
+        })), _label6 || (_label6 = _jsxs("label", {
+          children: ["Middle: ", _jsx("input", {})]
+        })), _label7 || (_label7 = _jsxs("label", {
+          children: ["Last: ", _jsx("input", {})]
+        }))]
+      })),
       container = _render4.container;
     const legend = container.querySelector("span[class$='-formFieldLayout__label']");
     expect(legend).toBeInTheDocument();
     expect(legend).toHaveTextContent(description);
   });
   it('should meet a11y standards', async () => {
-    const _render5 = render(_FormFieldGroup2 || (_FormFieldGroup2 = /*#__PURE__*/React.createElement(FormFieldGroup, {
-        description: "Please enter your full name"
-      }, /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+    const _render5 = render(_FormFieldGroup2 || (_FormFieldGroup2 = _jsxs(FormFieldGroup, {
+        description: "Please enter your full name",
+        children: [_jsxs("label", {
+          children: ["First: ", _jsx("input", {})]
+        }), _jsxs("label", {
+          children: ["Middle: ", _jsx("input", {})]
+        }), _jsxs("label", {
+          children: ["Last: ", _jsx("input", {})]
+        })]
+      }))),
       container = _render5.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/FormFieldGroup/index.js

@@ -25,15 +25,15 @@ var _dec, _class, _FormFieldGroup;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component, Children } from 'react';
 import { Grid } from '@instructure/ui-grid';
 import { pickProps, omitProps } from '@instructure/ui-react-utils';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { FormFieldLayout } from '../FormFieldLayout';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -75,26 +75,29 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
   renderColumns() {
     return Children.map(this.props.children, (child, index) => {
-      return child ? jsx(Grid.Col, {
+      return child ? _jsx(Grid.Col, {
         width: child.props && child.props.width ? 'auto' : void 0,
-        key: index
-      }, child) : null;
+        children: child
+      }, index) : null;
     });
   }
   renderChildren() {
-    return jsx(Grid, {
+    return _jsx(Grid, {
       colSpacing: this.props.colSpacing,
       rowSpacing: this.props.rowSpacing,
       vAlign: this.props.vAlign,
-      startAt: this.props.startAt || (this.props.layout === 'columns' ? 'medium' : null)
-    }, jsx(Grid.Row, null, this.renderColumns()));
+      startAt: this.props.startAt || (this.props.layout === 'columns' ? 'medium' : null),
+      children: _jsx(Grid.Row, {
+        children: this.renderColumns()
+      })
+    });
   }
   renderFields() {
     const styles = this.props.styles;
-    return jsx("span", {
-      key: "fields",
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup
-    }, this.renderChildren());
+    return _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup,
+      children: this.renderChildren()
+    }, "fields");
   }
   render() {
     const _this$props3 = this.props,
@@ -111,15 +114,18 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
     if (this.props.role && this.invalid && ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'].includes(this.props.role)) {
       ariaInvalid = 'true';
     }
-    return jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, FormFieldLayout.allowedProps), {
+    return _jsx(FormFieldLayout, {
+      ...omitProps(props, FormFieldGroup.allowedProps),
+      ...pickProps(props, FormFieldLayout.allowedProps),
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
       "aria-disabled": props.disabled ? 'true' : void 0,
       "aria-invalid": ariaInvalid,
       elementRef: this.handleRef,
-      isGroup: isGroup
-    }), this.renderFields());
+      isGroup: isGroup,
+      children: this.renderFields()
+    });
   }
 }, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.propTypes = propTypes, _FormFieldGroup.allowedProps = allowedProps, _FormFieldGroup.defaultProps = {
   as: 'fieldset',

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

@@ -23,12 +23,12 @@ var _FormFieldLabel, _FormFieldLabel2, _FormFieldLabel3;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import { FormFieldLabel } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<FormFieldLabel />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,23 +42,28 @@ describe('<FormFieldLabel />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    const _render = render(_FormFieldLabel || (_FormFieldLabel = /*#__PURE__*/React.createElement(FormFieldLabel, null, "Foo"))),
+    const _render = render(_FormFieldLabel || (_FormFieldLabel = _jsx(FormFieldLabel, {
+        children: "Foo"
+      }))),
       container = _render.container;
     const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
     expect(formFieldLabel).toBeInTheDocument();
     expect(formFieldLabel).toHaveTextContent('Foo');
   });
   it('should render as specified via the `as` prop', () => {
-    const _render2 = render(_FormFieldLabel2 || (_FormFieldLabel2 = /*#__PURE__*/React.createElement(FormFieldLabel, {
-        as: "li"
-      }, "Foo"))),
+    const _render2 = render(_FormFieldLabel2 || (_FormFieldLabel2 = _jsx(FormFieldLabel, {
+        as: "li",
+        children: "Foo"
+      }))),
       container = _render2.container;
     const formFieldLabel = container.querySelector('li');
     expect(formFieldLabel).toBeInTheDocument();
     expect(formFieldLabel).toHaveTextContent('Foo');
   });
   it('should meet a11y standards', async () => {
-    const _render3 = render(_FormFieldLabel3 || (_FormFieldLabel3 = /*#__PURE__*/React.createElement(FormFieldLabel, null, "Foo"))),
+    const _render3 = render(_FormFieldLabel3 || (_FormFieldLabel3 = _jsx(FormFieldLabel, {
+        children: "Foo"
+      }))),
       container = _render3.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/FormFieldLabel/index.js

@@ -23,13 +23,13 @@ var _dec, _dec2, _class, _FormFieldLabel;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { omitProps, getElementType, deprecated } from '@instructure/ui-react-utils';
-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 } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: FormField
@@ -69,10 +69,12 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
     const _this$props3 = this.props,
       styles = _this$props3.styles,
       children = _this$props3.children;
-    return jsx(ElementType, Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
+    return _jsx(ElementType, {
+      ...omitProps(this.props, FormFieldLabel.allowedProps),
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
-      ref: this.handleRef
-    }), children);
+      ref: this.handleRef,
+      children: children
+    });
   }
 }, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.propTypes = propTypes, _FormFieldLabel.allowedProps = allowedProps, _FormFieldLabel.defaultProps = {
   as: 'span'

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

@@ -23,12 +23,13 @@ var _FormFieldLayout, _FormFieldLayout2;
  * SOFTWARE.
  */
 
-import React from 'react';
+import { createRef } from 'react';
 import { render } from '@testing-library/react';
 import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import { FormFieldLayout } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<FormFieldLayout />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,7 +43,7 @@ describe('<FormFieldLayout />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render', () => {
-    const _render = render(_FormFieldLayout || (_FormFieldLayout = /*#__PURE__*/React.createElement(FormFieldLayout, {
+    const _render = render(_FormFieldLayout || (_FormFieldLayout = _jsx(FormFieldLayout, {
         label: "Username"
       }))),
       container = _render.container;
@@ -53,7 +54,7 @@ describe('<FormFieldLayout />', () => {
     expect(formFieldLabel).toHaveTextContent('Username');
   });
   it('should meet a11y standards', async () => {
-    const _render2 = render(_FormFieldLayout2 || (_FormFieldLayout2 = /*#__PURE__*/React.createElement(FormFieldLayout, {
+    const _render2 = render(_FormFieldLayout2 || (_FormFieldLayout2 = _jsx(FormFieldLayout, {
         label: "Username"
       }))),
       container = _render2.container;
@@ -62,14 +63,15 @@ describe('<FormFieldLayout />', () => {
   });
   it('should provide a ref to the input container', () => {
     const inputContainerRef = vi.fn();
-    const ref = /*#__PURE__*/React.createRef();
-    render(/*#__PURE__*/React.createElement(FormFieldLayout, {
+    const ref = /*#__PURE__*/createRef();
+    render(_jsx(FormFieldLayout, {
       label: "Username",
-      inputContainerRef: inputContainerRef
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      ref: ref
-    })));
+      inputContainerRef: inputContainerRef,
+      children: _jsx("input", {
+        type: "text",
+        ref: ref
+      })
+    }));
     expect(ref.current).toBeInstanceOf(HTMLInputElement);
     expect(inputContainerRef).toHaveBeenCalledWith(ref.current.parentElement);
   });

package/es/FormFieldLayout/index.js

@@ -25,11 +25,10 @@ var _dec, _dec2, _class, _FormFieldLayout;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { FormFieldMessages } from '../FormFieldMessages';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
@@ -40,6 +39,7 @@ import generateComponentTheme from './theme';
 parent: FormField
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends Component {
   constructor(props) {
     super(props);
@@ -91,7 +91,7 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
         if (typeof msg.text === 'string') {
           return msg.text.length > 0;
         }
-        // this is more complicated (e.g. an array, a React component,...)
+        // this is more complicated (e.g. an array, a Component,...)
         // but we don't try to optimize here for these cases
         return true;
       }
@@ -108,37 +108,42 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
         var _this$props$styles;
         // `legend` has some special built in CSS, this can only be reset
         // this way https://stackoverflow.com/a/65866981/319473
-        return jsx("legend", {
+        return _jsx("legend", {
           style: {
             display: 'contents'
-          }
-        }, jsx("span", {
-          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.formFieldLabel
-        }, this.props.label));
+          },
+          children: _jsx("span", {
+            css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.formFieldLabel,
+            children: this.props.label
+          })
+        });
       }
-      return jsx("span", {
-        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.formFieldLabel
-      }, this.props.label);
+      return _jsx("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.formFieldLabel,
+        children: this.props.label
+      });
     } else if (this.props.label) {
       if (this.elementType == 'fieldset') {
-        return jsx("legend", {
+        return _jsx("legend", {
           id: this._labelId,
           style: {
             display: 'contents'
-          }
-        }, this.props.label);
+          },
+          children: this.props.label
+        });
       }
       // needs to be wrapped because it needs an `id`
-      return jsx("div", {
+      return _jsx("div", {
         id: this._labelId,
         style: {
           display: 'contents'
-        }
-      }, this.props.label);
+        },
+        children: this.props.label
+      });
     } else return null;
   }
   renderVisibleMessages() {
-    return this.hasMessages ? jsx(FormFieldMessages, {
+    return this.hasMessages ? _jsx(FormFieldMessages, {
       id: this._messagesId,
       messages: this.props.messages,
       gridArea: "messages"
@@ -156,18 +161,21 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     const width = props.width,
       children = props.children;
     const hasNewErrorMsgAndIsGroup = !!(messages !== null && messages !== void 0 && messages.find(m => m.type === 'newError')) && isGroup;
-    return jsx(ElementType, Object.assign({}, omitProps(props, [...FormFieldLayout.allowedProps]), {
+    return _jsxs(ElementType, {
+      ...omitProps(props, [...FormFieldLayout.allowedProps]),
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       "aria-describedby": this.hasMessages ? this._messagesId : void 0,
       "aria-errormessage": this.props['aria-invalid'] ? this._messagesId : void 0,
       style: {
         width
       },
-      ref: this.handleRef
-    }), this.renderLabel(), hasNewErrorMsgAndIsGroup && this.renderVisibleMessages(), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldChildren,
-      ref: this.handleInputContainerRef
-    }, children), !hasNewErrorMsgAndIsGroup && this.renderVisibleMessages());
+      ref: this.handleRef,
+      children: [this.renderLabel(), hasNewErrorMsgAndIsGroup && this.renderVisibleMessages(), _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.formFieldChildren,
+        ref: this.handleInputContainerRef,
+        children: children
+      }), !hasNewErrorMsgAndIsGroup && this.renderVisibleMessages()]
+    });
   }
 }, _FormFieldLayout.displayName = "FormFieldLayout", _FormFieldLayout.componentId = 'FormFieldLayout', _FormFieldLayout.propTypes = propTypes, _FormFieldLayout.allowedProps = allowedProps, _FormFieldLayout.defaultProps = {
   inline: false,

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

@@ -23,22 +23,28 @@ var _FormFieldMessage, _FormFieldMessage2, _FormFieldMessage3;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { IconWarningLine } from '@instructure/ui-icons';
 import '@testing-library/jest-dom';
 import { FormFieldMessage } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<FormFieldMessage />', () => {
   it('should render message', () => {
-    const _render = render(_FormFieldMessage || (_FormFieldMessage = /*#__PURE__*/React.createElement(FormFieldMessage, null, "hello world"))),
+    const _render = render(_FormFieldMessage || (_FormFieldMessage = _jsx(FormFieldMessage, {
+        children: "hello world"
+      }))),
       container = _render.container;
     const formFieldMessage = container.querySelector("span[class$='-formFieldMessage']");
     expect(formFieldMessage).toBeInTheDocument();
     expect(formFieldMessage).toHaveTextContent('hello world');
   });
   it('should render message if Node is passed', () => {
-    const _render2 = render(_FormFieldMessage2 || (_FormFieldMessage2 = /*#__PURE__*/React.createElement(FormFieldMessage, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconWarningLine, null), " Invalid name")))),
+    const _render2 = render(_FormFieldMessage2 || (_FormFieldMessage2 = _jsx(FormFieldMessage, {
+        children: _jsxs("span", {
+          children: [_jsx(IconWarningLine, {}), " Invalid name"]
+        })
+      }))),
       container = _render2.container;
     const formFieldMessage = container.querySelector("span[class$='-formFieldMessage']");
     const iconSvg = container.querySelector('svg[name="IconWarning"]');
@@ -47,7 +53,7 @@ describe('<FormFieldMessage />', () => {
     expect(formFieldMessage).toHaveTextContent('Invalid name');
   });
   it('should meet a11y standards', async () => {
-    const _render3 = render(_FormFieldMessage3 || (_FormFieldMessage3 = /*#__PURE__*/React.createElement(FormFieldMessage, null))),
+    const _render3 = render(_FormFieldMessage3 || (_FormFieldMessage3 = _jsx(FormFieldMessage, {}))),
       container = _render3.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/FormFieldMessage/index.js

@@ -23,14 +23,14 @@ var _dec, _class, _FormFieldMessage, _IconWarningSolid;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconWarningSolid } 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: FormField
@@ -66,20 +66,24 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
     const _this$props3 = this.props,
       children = _this$props3.children,
       styles = _this$props3.styles;
-    return this.props.variant !== 'screenreader-only' ? jsx("span", {
+    return this.props.variant !== 'screenreader-only' ? _jsxs("span", {
       css: {
         display: 'flex'
-      }
-    }, this.props.variant === 'newError' && this.props.children && jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.errorIcon
-    }, _IconWarningSolid || (_IconWarningSolid = jsx(IconWarningSolid, {
-      color: "error"
-    }))), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
-      ref: this.handleRef
-    }, children)) : jsx(ScreenReaderContent, {
-      elementRef: this.handleRef
-    }, children);
+      },
+      children: [this.props.variant === 'newError' && this.props.children && _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.errorIcon,
+        children: _IconWarningSolid || (_IconWarningSolid = _jsx(IconWarningSolid, {
+          color: "error"
+        }))
+      }), _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
+        ref: this.handleRef,
+        children: children
+      })]
+    }) : _jsx(ScreenReaderContent, {
+      elementRef: this.handleRef,
+      children: children
+    });
   }
 }, _FormFieldMessage.displayName = "FormFieldMessage", _FormFieldMessage.componentId = 'FormFieldMessage', _FormFieldMessage.propTypes = propTypes, _FormFieldMessage.allowedProps = allowedProps, _FormFieldMessage.defaultProps = {
   variant: 'hint'