@instructure/ui-list 10.16.1-snapshot-0 → 10.16.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](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-list
 

package/es/InlineList/InlineListItem/__new-tests__/InlineListItem.test.js

@@ -23,30 +23,34 @@ var _InlineListItem, _InlineListItem2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { InlineListItem } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<InlineListItem />', () => {
   it('should render children', async () => {
-    render(_InlineListItem || (_InlineListItem = /*#__PURE__*/React.createElement(InlineListItem, null, "hello")));
+    render(_InlineListItem || (_InlineListItem = _jsx(InlineListItem, {
+      children: "hello"
+    })));
     const listItem = screen.getByRole('listitem');
     expect(listItem).toHaveTextContent('hello');
   });
   it('should render delimiter', async () => {
-    const _render = render(_InlineListItem2 || (_InlineListItem2 = /*#__PURE__*/React.createElement(InlineListItem, {
-        delimiter: "slash"
-      }, "List item"))),
+    const _render = render(_InlineListItem2 || (_InlineListItem2 = _jsx(InlineListItem, {
+        delimiter: "slash",
+        children: "List item"
+      }))),
       container = _render.container;
     const listItem = container.querySelector('span[class$="delimiter"]');
     expect(listItem).toHaveAttribute('aria-hidden', 'true');
   });
   it('should call elementRef', async () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(InlineListItem, {
-      elementRef: elementRef
-    }, "List item"));
+    render(_jsx(InlineListItem, {
+      elementRef: elementRef,
+      children: "List item"
+    }));
     const listItem = screen.getByRole('listitem');
     expect(elementRef).toHaveBeenCalledWith(listItem);
   });

package/es/InlineList/InlineListItem/index.js

@@ -24,15 +24,16 @@ var _dec, _dec2, _class, _InlineListItem;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
+
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { passthroughProps } 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, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: InlineList
@@ -70,18 +71,20 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
       spacing = _this$props3.spacing,
       styles = _this$props3.styles,
       rest = _objectWithoutProperties(_this$props3, _excluded);
-    return jsx(View, Object.assign({}, passthroughProps(rest), {
+    return _jsxs(View, {
+      ...passthroughProps(rest),
       css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
       as: "li",
       margin: margin,
       padding: padding,
       display: "inline-block",
       maxWidth: "100%",
-      elementRef: this.handleRef
-    }), children, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
-      "aria-hidden": "true"
-    }));
+      elementRef: this.handleRef,
+      children: [children, _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
+        "aria-hidden": "true"
+      })]
+    });
   }
 }, _InlineListItem.displayName = "InlineListItem", _InlineListItem.componentId = 'InlineList.Item', _InlineListItem.propTypes = propTypes, _InlineListItem.allowedProps = allowedProps, _InlineListItem.defaultProps = {
   padding: 'none',

package/es/InlineList/__examples__/InlineList.examples.js

@@ -23,19 +23,19 @@ var _InlineList$Item, _InlineList$Item2, _InlineList$Item3;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { InlineList } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export default {
   sectionProp: 'size',
   getComponentProps: () => {
     return {
-      children: [_InlineList$Item || (_InlineList$Item = /*#__PURE__*/React.createElement(InlineList.Item, {
-        key: "1"
-      }, "Oranges")), _InlineList$Item2 || (_InlineList$Item2 = /*#__PURE__*/React.createElement(InlineList.Item, {
-        key: "2"
-      }, "Pineapples")), _InlineList$Item3 || (_InlineList$Item3 = /*#__PURE__*/React.createElement(InlineList.Item, {
-        key: "3"
-      }, "Bananas"))]
+      children: [_InlineList$Item || (_InlineList$Item = _jsx(InlineList.Item, {
+        children: "Oranges"
+      }, "1")), _InlineList$Item2 || (_InlineList$Item2 = _jsx(InlineList.Item, {
+        children: "Pineapples"
+      }, "2")), _InlineList$Item3 || (_InlineList$Item3 = _jsx(InlineList.Item, {
+        children: "Bananas"
+      }, "3"))]
     };
   },
   filter: props => {

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

@@ -23,12 +23,12 @@ var _InlineList, _InlineList2, _InlineList3, _InlineList4, _InlineList5;
  * SOFTWARE.
  */
 
-import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { InlineList } from '../index';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<InlineList />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,14 +42,33 @@ describe('<InlineList />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render list items and filter out null/falsy children', async () => {
-    render(_InlineList || (_InlineList = /*#__PURE__*/React.createElement(InlineList, null, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4"), null, false)));
+    render(_InlineList || (_InlineList = _jsxs(InlineList, {
+      children: [_jsx(InlineList.Item, {
+        children: "List item 1"
+      }), _jsx(InlineList.Item, {
+        children: "List item 2"
+      }), _jsx(InlineList.Item, {
+        children: "List item 3"
+      }), _jsx(InlineList.Item, {
+        children: "List item 4"
+      }), null, false]
+    })));
     const listItems = screen.getAllByRole('listitem');
     expect(listItems.length).toEqual(4);
   });
   it('should render a delimiter when delimiter="pipe"', async () => {
-    const _render = render(_InlineList2 || (_InlineList2 = /*#__PURE__*/React.createElement(InlineList, {
-        delimiter: "pipe"
-      }, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4")))),
+    const _render = render(_InlineList2 || (_InlineList2 = _jsxs(InlineList, {
+        delimiter: "pipe",
+        children: [_jsx(InlineList.Item, {
+          children: "List item 1"
+        }), _jsx(InlineList.Item, {
+          children: "List item 2"
+        }), _jsx(InlineList.Item, {
+          children: "List item 3"
+        }), _jsx(InlineList.Item, {
+          children: "List item 4"
+        })]
+      }))),
       container = _render.container;
     const delimiters = container.querySelectorAll('span[aria-hidden="true"]');
     expect(delimiters.length).toEqual(4);
@@ -58,22 +77,50 @@ describe('<InlineList />', () => {
     });
   });
   it('should warn when itemSpacing is set when delimiter is set to anything other than none', async () => {
-    render(_InlineList3 || (_InlineList3 = /*#__PURE__*/React.createElement(InlineList, {
+    render(_InlineList3 || (_InlineList3 = _jsxs(InlineList, {
       delimiter: "pipe",
-      itemSpacing: "large"
-    }, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4"))));
+      itemSpacing: "large",
+      children: [_jsx(InlineList.Item, {
+        children: "List item 1"
+      }), _jsx(InlineList.Item, {
+        children: "List item 2"
+      }), _jsx(InlineList.Item, {
+        children: "List item 3"
+      }), _jsx(InlineList.Item, {
+        children: "List item 4"
+      })]
+    })));
     const warning = `Warning: [InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`;
     expect(consoleErrorMock.mock.calls[0][0]).toBe(warning);
   });
   it('should render an ordered list', async () => {
-    render(_InlineList4 || (_InlineList4 = /*#__PURE__*/React.createElement(InlineList, {
-      as: "ol"
-    }, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4"))));
+    render(_InlineList4 || (_InlineList4 = _jsxs(InlineList, {
+      as: "ol",
+      children: [_jsx(InlineList.Item, {
+        children: "List item 1"
+      }), _jsx(InlineList.Item, {
+        children: "List item 2"
+      }), _jsx(InlineList.Item, {
+        children: "List item 3"
+      }), _jsx(InlineList.Item, {
+        children: "List item 4"
+      })]
+    })));
     const list = screen.getByRole('list');
     expect(list.tagName).toBe('OL');
   });
   it('should meet a11y standards', async () => {
-    const _render2 = render(_InlineList5 || (_InlineList5 = /*#__PURE__*/React.createElement(InlineList, null, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4")))),
+    const _render2 = render(_InlineList5 || (_InlineList5 = _jsxs(InlineList, {
+        children: [_jsx(InlineList.Item, {
+          children: "List item 1"
+        }), _jsx(InlineList.Item, {
+          children: "List item 2"
+        }), _jsx(InlineList.Item, {
+          children: "List item 3"
+        }), _jsx(InlineList.Item, {
+          children: "List item 4"
+        })]
+      }))),
       container = _render2.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/InlineList/index.js

@@ -24,12 +24,13 @@ var _dec, _class, _InlineList;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { Children, Component } from 'react';
+import { Children, Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { InlineListItem } from './InlineListItem';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -65,13 +66,15 @@ let InlineList = (_dec = testable(), _dec(_class = (_InlineList = class InlineLi
       margin = _this$props.margin,
       elementRef = _this$props.elementRef,
       rest = _objectWithoutProperties(_this$props, _excluded);
-    return /*#__PURE__*/React.createElement(View, Object.assign({}, passthroughProps(rest), {
+    return _jsx(View, {
+      ...passthroughProps(rest),
       as: as,
       margin: margin,
       padding: "0",
       elementRef: this.handleRef,
-      display: "block"
-    }), this.renderChildren());
+      display: "block",
+      children: this.renderChildren()
+    });
   }
 }, _InlineList.displayName = "InlineList", _InlineList.propTypes = propTypes, _InlineList.allowedProps = allowedProps, _InlineList.defaultProps = {
   itemSpacing: 'none',

package/es/List/ListItem/__new-tests__/ListItem.test.js

@@ -23,22 +23,25 @@ var _ListItem;
  * SOFTWARE.
  */
 
-import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { ListItem } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<ListItem />', () => {
   it('should render children', async () => {
-    render(_ListItem || (_ListItem = /*#__PURE__*/React.createElement(ListItem, null, "hello")));
+    render(_ListItem || (_ListItem = _jsx(ListItem, {
+      children: "hello"
+    })));
     const listItem = screen.getByRole('listitem');
     expect(listItem).toHaveTextContent('hello');
   });
   it('should call elementRef', async () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(ListItem, {
-      elementRef: elementRef
-    }, "List item"));
+    render(_jsx(ListItem, {
+      elementRef: elementRef,
+      children: "List item"
+    }));
     const listItem = screen.getByRole('listitem');
     expect(elementRef).toHaveBeenCalledWith(listItem);
   });

package/es/List/ListItem/index.js

@@ -25,15 +25,15 @@ var _dec, _dec2, _class, _ListItem;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { passthroughProps } 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: List
@@ -71,14 +71,16 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       children = _this$props3.children,
       styles = _this$props3.styles,
       rest = _objectWithoutProperties(_this$props3, _excluded);
-    return jsx(View, Object.assign({}, passthroughProps(rest), {
+    return _jsx(View, {
+      ...passthroughProps(rest),
       css: styles === null || styles === void 0 ? void 0 : styles.listItem,
       as: "li",
       margin: margin,
       padding: padding,
       maxWidth: "100%",
-      elementRef: this.handleRef
-    }), children);
+      elementRef: this.handleRef,
+      children: children
+    });
   }
 }, _ListItem.displayName = "ListItem", _ListItem.componentId = 'List.Item', _ListItem.propTypes = propTypes, _ListItem.allowedProps = allowedProps, _ListItem.defaultProps = {
   padding: 'none',

package/es/List/__examples__/List.examples.js

@@ -23,19 +23,19 @@ var _List$Item, _List$Item2, _List$Item3;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { List } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export default {
   sectionProp: 'size',
   getComponentProps: () => {
     return {
-      children: [_List$Item || (_List$Item = /*#__PURE__*/React.createElement(List.Item, {
-        key: "1"
-      }, "Oranges")), _List$Item2 || (_List$Item2 = /*#__PURE__*/React.createElement(List.Item, {
-        key: "2"
-      }, "Pineapples")), _List$Item3 || (_List$Item3 = /*#__PURE__*/React.createElement(List.Item, {
-        key: "3"
-      }, "Bananas"))]
+      children: [_List$Item || (_List$Item = _jsx(List.Item, {
+        children: "Oranges"
+      }, "1")), _List$Item2 || (_List$Item2 = _jsx(List.Item, {
+        children: "Pineapples"
+      }, "2")), _List$Item3 || (_List$Item3 = _jsx(List.Item, {
+        children: "Bananas"
+      }, "3"))]
     };
   },
   filter: props => {

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

@@ -23,12 +23,12 @@ var _List, _List2, _List3, _List4;
  * SOFTWARE.
  */
 
-import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 import { List } from '../index';
 import { runAxeCheck } from '@instructure/ui-axe-check';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<List />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -42,27 +42,65 @@ describe('<List />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render list items and filter out null/falsy children', async () => {
-    render(_List || (_List = /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4"), null, false)));
+    render(_List || (_List = _jsxs(List, {
+      children: [_jsx(List.Item, {
+        children: "List item 1"
+      }), _jsx(List.Item, {
+        children: "List item 2"
+      }), _jsx(List.Item, {
+        children: "List item 3"
+      }), _jsx(List.Item, {
+        children: "List item 4"
+      }), null, false]
+    })));
     const listItems = screen.getAllByRole('listitem');
     expect(listItems.length).toEqual(4);
   });
   it('should warn when itemSpacing is set when delimiter is set to anything other than none', async () => {
-    render(_List2 || (_List2 = /*#__PURE__*/React.createElement(List, {
+    render(_List2 || (_List2 = _jsxs(List, {
       delimiter: "dashed",
-      itemSpacing: "large"
-    }, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4"))));
+      itemSpacing: "large",
+      children: [_jsx(List.Item, {
+        children: "List item 1"
+      }), _jsx(List.Item, {
+        children: "List item 2"
+      }), _jsx(List.Item, {
+        children: "List item 3"
+      }), _jsx(List.Item, {
+        children: "List item 4"
+      })]
+    })));
     const warning = `Warning: [List] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`;
     expect(consoleErrorMock.mock.calls[0][0]).toBe(warning);
   });
   it('should render an ordered list', async () => {
-    render(_List3 || (_List3 = /*#__PURE__*/React.createElement(List, {
-      as: "ol"
-    }, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4"))));
+    render(_List3 || (_List3 = _jsxs(List, {
+      as: "ol",
+      children: [_jsx(List.Item, {
+        children: "List item 1"
+      }), _jsx(List.Item, {
+        children: "List item 2"
+      }), _jsx(List.Item, {
+        children: "List item 3"
+      }), _jsx(List.Item, {
+        children: "List item 4"
+      })]
+    })));
     const list = screen.getByRole('list');
     expect(list.tagName).toBe('OL');
   });
   it('should meet a11y standards', async () => {
-    const _render = render(_List4 || (_List4 = /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4")))),
+    const _render = render(_List4 || (_List4 = _jsxs(List, {
+        children: [_jsx(List.Item, {
+          children: "List item 1"
+        }), _jsx(List.Item, {
+          children: "List item 2"
+        }), _jsx(List.Item, {
+          children: "List item 3"
+        }), _jsx(List.Item, {
+          children: "List item 4"
+        })]
+      }))),
       container = _render.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/List/index.js

@@ -25,16 +25,16 @@ var _dec, _dec2, _class, _List;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Children, Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { ListItem } from './ListItem';
-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";
 /**
 ---
 category: components
@@ -80,13 +80,15 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       elementRef = _this$props3.elementRef,
       styles = _this$props3.styles,
       rest = _objectWithoutProperties(_this$props3, _excluded);
-    return jsx(View, Object.assign({}, passthroughProps(rest), {
+    return _jsx(View, {
+      ...passthroughProps(rest),
       css: styles === null || styles === void 0 ? void 0 : styles.list,
       as: as,
       margin: margin,
       elementRef: this.handleRef,
-      display: "block"
-    }), this.renderChildren());
+      display: "block",
+      children: this.renderChildren()
+    });
   }
 }, _List.displayName = "List", _List.componentId = 'List', _List.propTypes = propTypes, _List.allowedProps = allowedProps, _List.defaultProps = {
   as: 'ul',

package/lib/InlineList/InlineListItem/__new-tests__/InlineListItem.test.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
 require("@testing-library/jest-dom");
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _InlineListItem, _InlineListItem2;
 /*
  * The MIT License (MIT)
@@ -32,24 +31,28 @@ var _InlineListItem, _InlineListItem2;
  */
 describe('<InlineListItem />', () => {
   it('should render children', async () => {
-    (0, _react2.render)(_InlineListItem || (_InlineListItem = /*#__PURE__*/_react.default.createElement(_index.InlineListItem, null, "hello")));
-    const listItem = _react2.screen.getByRole('listitem');
+    (0, _react.render)(_InlineListItem || (_InlineListItem = (0, _jsxRuntime.jsx)(_index.InlineListItem, {
+      children: "hello"
+    })));
+    const listItem = _react.screen.getByRole('listitem');
     expect(listItem).toHaveTextContent('hello');
   });
   it('should render delimiter', async () => {
-    const _render = (0, _react2.render)(_InlineListItem2 || (_InlineListItem2 = /*#__PURE__*/_react.default.createElement(_index.InlineListItem, {
-        delimiter: "slash"
-      }, "List item"))),
+    const _render = (0, _react.render)(_InlineListItem2 || (_InlineListItem2 = (0, _jsxRuntime.jsx)(_index.InlineListItem, {
+        delimiter: "slash",
+        children: "List item"
+      }))),
       container = _render.container;
     const listItem = container.querySelector('span[class$="delimiter"]');
     expect(listItem).toHaveAttribute('aria-hidden', 'true');
   });
   it('should call elementRef', async () => {
     const elementRef = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.InlineListItem, {
-      elementRef: elementRef
-    }, "List item"));
-    const listItem = _react2.screen.getByRole('listitem');
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.InlineListItem, {
+      elementRef: elementRef,
+      children: "List item"
+    }));
+    const listItem = _react.screen.getByRole('listitem');
     expect(elementRef).toHaveBeenCalledWith(listItem);
   });
 });

package/lib/InlineList/InlineListItem/index.js

@@ -14,6 +14,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 = ["delimiter", "size", "margin", "padding", "elementRef", "children", "spacing", "styles"];
 var _dec, _dec2, _class, _InlineListItem;
 /*
@@ -39,7 +40,6 @@ var _dec, _dec2, _class, _InlineListItem;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: InlineList
@@ -77,18 +77,20 @@ let InlineListItem = exports.InlineListItem = (_dec = (0, _emotion.withStyle)(_s
       spacing = _this$props3.spacing,
       styles = _this$props3.styles,
       rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
+    return (0, _jsxRuntime.jsxs)(_View.View, {
+      ...(0, _passthroughProps.passthroughProps)(rest),
       css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
       as: "li",
       margin: margin,
       padding: padding,
       display: "inline-block",
       maxWidth: "100%",
-      elementRef: this.handleRef
-    }), children, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
-      "aria-hidden": "true"
-    }));
+      elementRef: this.handleRef,
+      children: [children, (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
+        "aria-hidden": "true"
+      })]
+    });
   }
 }, _InlineListItem.displayName = "InlineListItem", _InlineListItem.componentId = 'InlineList.Item', _InlineListItem.propTypes = _props.propTypes, _InlineListItem.allowedProps = _props.allowedProps, _InlineListItem.defaultProps = {
   padding: 'none',

package/lib/InlineList/__examples__/InlineList.examples.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _InlineList$Item, _InlineList$Item2, _InlineList$Item3;
 /*
  * The MIT License (MIT)
@@ -35,13 +34,13 @@ var _default = exports.default = {
   sectionProp: 'size',
   getComponentProps: () => {
     return {
-      children: [_InlineList$Item || (_InlineList$Item = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, {
-        key: "1"
-      }, "Oranges")), _InlineList$Item2 || (_InlineList$Item2 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, {
-        key: "2"
-      }, "Pineapples")), _InlineList$Item3 || (_InlineList$Item3 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, {
-        key: "3"
-      }, "Bananas"))]
+      children: [_InlineList$Item || (_InlineList$Item = (0, _jsxRuntime.jsx)(_index.InlineList.Item, {
+        children: "Oranges"
+      }, "1")), _InlineList$Item2 || (_InlineList$Item2 = (0, _jsxRuntime.jsx)(_index.InlineList.Item, {
+        children: "Pineapples"
+      }, "2")), _InlineList$Item3 || (_InlineList$Item3 = (0, _jsxRuntime.jsx)(_index.InlineList.Item, {
+        children: "Bananas"
+      }, "3"))]
     };
   },
   filter: props => {