@instructure/ui-flex 10.16.0 → 10.16.1-pr-snapshot-1744893671793

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
+
+**Note:** Version bump only for package @instructure/ui-flex
+
+
+
+
+
 # [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
 
 **Note:** Version bump only for package @instructure/ui-flex

package/es/Flex/Item/__new-tests__/FlexItem.test.js

@@ -23,33 +23,38 @@ var _Item, _Item2;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Item } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<Item />', () => {
   it('should render children', async () => {
-    const _render = render(_Item || (_Item = /*#__PURE__*/React.createElement(Item, null, "Flex item 1"))),
+    const _render = render(_Item || (_Item = _jsx(Item, {
+        children: "Flex item 1"
+      }))),
       container = _render.container;
-    const item = container.querySelector('[class$="-flexItem"]');
+    const item = container.querySelector('[class*="-flexItem"]');
     expect(item).toBeInTheDocument();
     expect(item).toHaveTextContent('Flex item 1');
   });
   it('should support an elementRef prop', async () => {
     const elementRef = vi.fn();
-    const _render2 = render(/*#__PURE__*/React.createElement(Item, {
-        elementRef: elementRef
-      }, "Flex item 2")),
+    const _render2 = render(_jsx(Item, {
+        elementRef: elementRef,
+        children: "Flex item 2"
+      })),
       container = _render2.container;
-    const item = container.querySelector('[class$="-flexItem"]');
+    const item = container.querySelector('[class*="-flexItem"]');
     await waitFor(() => {
       expect(elementRef).toHaveBeenCalledWith(item);
     });
   });
   it('should meet a11y standards', async () => {
-    const _render3 = render(_Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, null, "Flex item 3"))),
+    const _render3 = render(_Item2 || (_Item2 = _jsx(Item, {
+        children: "Flex item 3"
+      }))),
       container = _render3.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/Flex/Item/index.js

@@ -23,13 +23,13 @@ var _dec, _class, _Item;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Flex
@@ -72,7 +72,8 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
       styles = _this$props3.styles;
     const dirColumn = direction === 'column';
     const dirRow = direction === 'row';
-    return jsx(View, Object.assign({}, props, {
+    return _jsx(View, {
+      ...props,
       css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
       elementRef: this.handleRef,
       as: as,
@@ -83,8 +84,9 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
       padding: padding,
       overflowX: overflowX,
       overflowY: overflowY || (dirColumn ? 'auto' : 'visible'),
-      withVisualDebug: withVisualDebug
-    }), children);
+      withVisualDebug: withVisualDebug,
+      children: children
+    });
   }
 }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.propTypes = propTypes, _Item.allowedProps = allowedProps, _Item.defaultProps = {
   as: 'span',

package/es/Flex/__examples__/Flex.examples.js

@@ -22,49 +22,49 @@
  * SOFTWARE.
  */
 
-import React from 'react';
 import { Flex } from '../index';
-const regular = [/*#__PURE__*/React.createElement(Flex.Item, {
-  key: "0"
-}, "One"), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "1"
-}, "Two"), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "2"
-}, "Three"), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "3"
-}, "Four")];
-const shrink = [/*#__PURE__*/React.createElement(Flex.Item, {
-  key: "0",
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+const regular = [_jsx(Flex.Item, {
+  children: "One"
+}, "0"), _jsx(Flex.Item, {
+  children: "Two"
+}, "1"), _jsx(Flex.Item, {
+  children: "Three"
+}, "2"), _jsx(Flex.Item, {
+  children: "Four"
+}, "3")];
+const shrink = [_jsx(Flex.Item, {
   padding: "x-small",
-  shouldShrink: true
-}, "Villum dolore eu fugiat nulla pariatur."), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "1",
+  shouldShrink: true,
+  children: "Villum dolore eu fugiat nulla pariatur."
+}, "0"), _jsx(Flex.Item, {
   padding: "x-small",
-  shouldShrink: true
-}, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "2",
+  shouldShrink: true,
+  children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+}, "1"), _jsx(Flex.Item, {
   padding: "x-small",
-  shouldShrink: true
-}, "Duis aute irure."), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "3",
+  shouldShrink: true,
+  children: "Duis aute irure."
+}, "2"), _jsx(Flex.Item, {
   padding: "x-small",
-  shouldShrink: true
-}, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")];
-const grow = [/*#__PURE__*/React.createElement(Flex.Item, {
-  key: "0",
+  shouldShrink: true,
+  children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}, "3")];
+const grow = [_jsx(Flex.Item, {
   padding: "x-small",
-  size: "200px"
-}, "I am always 200px."), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "1",
+  size: "200px",
+  children: "I am always 200px."
+}, "0"), _jsx(Flex.Item, {
   padding: "x-small",
   shouldShrink: true,
   shouldGrow: true,
-  size: "200px"
-}, "I can grow, and shrink down to 200px."), /*#__PURE__*/React.createElement(Flex.Item, {
-  key: "2",
+  size: "200px",
+  children: "I can grow, and shrink down to 200px."
+}, "1"), _jsx(Flex.Item, {
   padding: "x-small",
-  size: "25%"
-}, "I am always 25%.")];
+  size: "25%",
+  children: "I am always 25%."
+}, "2")];
 export default {
   maxExamplesPerPage: 50,
   propValues: {

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

@@ -23,103 +23,163 @@ var _Flex, _Flex2, _div, _Flex3, _Flex4, _Flex5, _Flex6, _Flex7, _Flex8, _Flex9,
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Flex } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Flex />', () => {
   it('should render Flex.Items as children', async () => {
-    const _render = render(_Flex || (_Flex = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 3"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 4")))),
+    const _render = render(_Flex || (_Flex = _jsxs(Flex, {
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 3"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 4"
+        })]
+      }))),
       container = _render.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     expect(flex).toBeInTheDocument();
-    const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class$="-flexItem"]');
+    const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class*="-flexItem"]');
     expect(items === null || items === void 0 ? void 0 : items.length).toBe(4);
   });
   it('should render other markup as children', async () => {
-    const _render2 = render(_Flex2 || (_Flex2 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement("div", null, "foo"), /*#__PURE__*/React.createElement("div", null, "bar"), /*#__PURE__*/React.createElement("div", null, "baz")))),
+    const _render2 = render(_Flex2 || (_Flex2 = _jsxs(Flex, {
+        children: [_jsx("div", {
+          children: "foo"
+        }), _jsx("div", {
+          children: "bar"
+        }), _jsx("div", {
+          children: "baz"
+        })]
+      }))),
       container = _render2.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const childs = flex === null || flex === void 0 ? void 0 : flex.childNodes;
     expect(childs === null || childs === void 0 ? void 0 : childs.length).toBe(3);
   });
   it('should render children when children is a function', async () => {
-    render(/*#__PURE__*/React.createElement(Flex, null, () => _div || (_div = /*#__PURE__*/React.createElement("div", null, "hello world"))));
+    render(_jsx(Flex, {
+      children: () => _div || (_div = _jsx("div", {
+        children: "hello world"
+      }))
+    }));
     const child = screen.getByText('hello world');
     expect(child).toBeInTheDocument();
   });
   it('should render no markup if there are no children', async () => {
-    const _render3 = render(_Flex3 || (_Flex3 = /*#__PURE__*/React.createElement(Flex, null))),
+    const _render3 = render(_Flex3 || (_Flex3 = _jsx(Flex, {}))),
       container = _render3.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     expect(flex).not.toBeInTheDocument();
   });
   it('should accept width and height as props', async () => {
-    const _render4 = render(_Flex4 || (_Flex4 = /*#__PURE__*/React.createElement(Flex, {
+    const _render4 = render(_Flex4 || (_Flex4 = _jsxs(Flex, {
         width: "400px",
-        height: "200px"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 3"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 4")))),
+        height: "200px",
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 3"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 4"
+        })]
+      }))),
       container = _render4.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const flexStyle = window.getComputedStyle(flex);
     expect(flexStyle.width).toBe('400px');
     expect(flexStyle.height).toBe('200px');
   });
   it('should set flex-direction with the direction property', async () => {
-    const _render5 = render(_Flex5 || (_Flex5 = /*#__PURE__*/React.createElement(Flex, {
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render5 = render(_Flex5 || (_Flex5 = _jsxs(Flex, {
+        direction: "column",
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render5.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const flexStyle = window.getComputedStyle(flex);
     expect(flexStyle.flexDirection).toBe('column');
   });
   it('should render an inline-flex container with the display property', async () => {
-    const _render6 = render(_Flex6 || (_Flex6 = /*#__PURE__*/React.createElement(Flex, {
-        display: "inline-flex"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render6 = render(_Flex6 || (_Flex6 = _jsxs(Flex, {
+        display: "inline-flex",
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render6.container;
-    const flex = container.querySelector('[class$="-inlineFlex-flex"]');
+    const flex = container.querySelector('[class*="inlineFlex"][class*="flex"]');
     const flexStyle = window.getComputedStyle(flex);
     expect(flexStyle.display).toBe('inline-flex');
   });
   it('should set align-items with the alignItems property', async () => {
-    const _render7 = render(_Flex7 || (_Flex7 = /*#__PURE__*/React.createElement(Flex, {
-        alignItems: "start"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render7 = render(_Flex7 || (_Flex7 = _jsxs(Flex, {
+        alignItems: "start",
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render7.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const flexStyle = window.getComputedStyle(flex);
     expect(flexStyle.alignItems).toBe('flex-start');
   });
   it('should set justify-content with the justifyItems property', async () => {
-    const _render8 = render(_Flex8 || (_Flex8 = /*#__PURE__*/React.createElement(Flex, {
-        justifyItems: "space-between"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render8 = render(_Flex8 || (_Flex8 = _jsxs(Flex, {
+        justifyItems: "space-between",
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render8.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const flexStyle = window.getComputedStyle(flex);
     expect(flexStyle.justifyContent).toBe('space-between');
   });
   it('should set flex-wrap with the wrap property', async () => {
-    const _render9 = render(_Flex9 || (_Flex9 = /*#__PURE__*/React.createElement(Flex, {
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render9 = render(_Flex9 || (_Flex9 = _jsxs(Flex, {
+        wrap: "wrap",
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render9.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const flexStyle = window.getComputedStyle(flex);
     expect(flexStyle.flexWrap).toBe('wrap');
   });
   it('should let Flex.Items align themselves with the align property', async () => {
-    const _render10 = render(_Flex10 || (_Flex10 = /*#__PURE__*/React.createElement(Flex, {
-        alignItems: "end"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
-        align: "stretch"
-      }, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render10 = render(_Flex10 || (_Flex10 = _jsxs(Flex, {
+        alignItems: "end",
+        children: [_jsx(Flex.Item, {
+          align: "stretch",
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render10.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     const item = screen.getByText('Flex item 1');
     const flexStyle = window.getComputedStyle(flex);
     const itemStyle = window.getComputedStyle(item);
@@ -127,9 +187,14 @@ describe('<Flex />', () => {
     expect(itemStyle.alignSelf).toBe('stretch');
   });
   it('should let Flex.Items flex-grow with the shouldGrow property', async () => {
-    render(_Flex11 || (_Flex11 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, {
-      shouldGrow: true
-    }, "Flex item 2"))));
+    render(_Flex11 || (_Flex11 = _jsxs(Flex, {
+      children: [_jsx(Flex.Item, {
+        children: "Flex item 1"
+      }), _jsx(Flex.Item, {
+        shouldGrow: true,
+        children: "Flex item 2"
+      })]
+    })));
     const item1 = screen.getByText('Flex item 1');
     const item2 = screen.getByText('Flex item 2');
     const item1Style = window.getComputedStyle(item1);
@@ -138,9 +203,14 @@ describe('<Flex />', () => {
     expect(item2Style.flexGrow).toBe('1');
   });
   it('should let Flex.Items flex-shrink with the shouldShrink property', async () => {
-    render(_Flex12 || (_Flex12 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, {
-      shouldShrink: true
-    }, "Flex item 2"))));
+    render(_Flex12 || (_Flex12 = _jsxs(Flex, {
+      children: [_jsx(Flex.Item, {
+        children: "Flex item 1"
+      }), _jsx(Flex.Item, {
+        shouldShrink: true,
+        children: "Flex item 2"
+      })]
+    })));
     const item1 = screen.getByText('Flex item 1');
     const item2 = screen.getByText('Flex item 2');
     const item1Style = window.getComputedStyle(item1);
@@ -149,9 +219,16 @@ describe('<Flex />', () => {
     expect(item2Style.flexShrink).toBe('1');
   });
   it('should set flex-basis and min-width on Flex.Items with the size property', async () => {
-    render(_Flex13 || (_Flex13 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, {
-      size: "100px"
-    }, "Flex item 3"))));
+    render(_Flex13 || (_Flex13 = _jsxs(Flex, {
+      children: [_jsx(Flex.Item, {
+        children: "Flex item 1"
+      }), _jsx(Flex.Item, {
+        children: "Flex item 2"
+      }), _jsx(Flex.Item, {
+        size: "100px",
+        children: "Flex item 3"
+      })]
+    })));
     const item2 = screen.getByText('Flex item 2');
     const item3 = screen.getByText('Flex item 3');
     const item2Style = window.getComputedStyle(item2);
@@ -162,17 +239,26 @@ describe('<Flex />', () => {
   });
   it('should support an elementRef prop', async () => {
     const elementRef = vi.fn();
-    const _render11 = render(/*#__PURE__*/React.createElement(Flex, {
-        elementRef: elementRef
-      }, _Flex$Item || (_Flex$Item = /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item")))),
+    const _render11 = render(_jsx(Flex, {
+        elementRef: elementRef,
+        children: _Flex$Item || (_Flex$Item = _jsx(Flex.Item, {
+          children: "Flex item"
+        }))
+      })),
       container = _render11.container;
-    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flex = container.querySelector('[class*="flex"]');
     await waitFor(() => {
       expect(elementRef).toHaveBeenCalledWith(flex);
     });
   });
   it('should meet a11y standards', async () => {
-    const _render12 = render(_Flex14 || (_Flex14 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+    const _render12 = render(_Flex14 || (_Flex14 = _jsxs(Flex, {
+        children: [_jsx(Flex.Item, {
+          children: "Flex item 1"
+        }), _jsx(Flex.Item, {
+          children: "Flex item 2"
+        })]
+      }))),
       container = _render12.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/Flex/index.js

@@ -23,15 +23,15 @@ var _dec, _class, _Flex;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Children, Component } from 'react';
+import { Children, Component } from 'react';
 import { safeCloneElement, passthroughProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { Item } from './Item';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -89,7 +89,8 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
     if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
     if (children && Children.count(children) > 0) {
-      return jsx(View, Object.assign({}, passthroughProps(this.props), {
+      return _jsx(View, {
+        ...passthroughProps(this.props),
         css: styles === null || styles === void 0 ? void 0 : styles.flex,
         elementRef: this.handleRef,
         as: as,
@@ -99,8 +100,9 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
         margin: margin,
         padding: padding,
         textAlign: textAlign,
-        withVisualDebug: withVisualDebug
-      }), this.renderChildren(children));
+        withVisualDebug: withVisualDebug,
+        children: this.renderChildren(children)
+      });
     } else {
       return null;
     }

package/lib/Flex/Item/__new-tests__/FlexItem.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 _Item, _Item2;
 /*
  * The MIT License (MIT)
@@ -33,25 +32,30 @@ var _Item, _Item2;
  */
 describe('<Item />', () => {
   it('should render children', async () => {
-    const _render = (0, _react2.render)(_Item || (_Item = /*#__PURE__*/_react.default.createElement(_index.Item, null, "Flex item 1"))),
+    const _render = (0, _react.render)(_Item || (_Item = (0, _jsxRuntime.jsx)(_index.Item, {
+        children: "Flex item 1"
+      }))),
       container = _render.container;
-    const item = container.querySelector('[class$="-flexItem"]');
+    const item = container.querySelector('[class*="-flexItem"]');
     expect(item).toBeInTheDocument();
     expect(item).toHaveTextContent('Flex item 1');
   });
   it('should support an elementRef prop', async () => {
     const elementRef = _vitest.vi.fn();
-    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Item, {
-        elementRef: elementRef
-      }, "Flex item 2")),
+    const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Item, {
+        elementRef: elementRef,
+        children: "Flex item 2"
+      })),
       container = _render2.container;
-    const item = container.querySelector('[class$="-flexItem"]');
-    await (0, _react2.waitFor)(() => {
+    const item = container.querySelector('[class*="-flexItem"]');
+    await (0, _react.waitFor)(() => {
       expect(elementRef).toHaveBeenCalledWith(item);
     });
   });
   it('should meet a11y standards', async () => {
-    const _render3 = (0, _react2.render)(_Item2 || (_Item2 = /*#__PURE__*/_react.default.createElement(_index.Item, null, "Flex item 3"))),
+    const _render3 = (0, _react.render)(_Item2 || (_Item2 = (0, _jsxRuntime.jsx)(_index.Item, {
+        children: "Flex item 3"
+      }))),
       container = _render3.container;
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     expect(axeCheck).toBe(true);

package/lib/Flex/Item/index.js

@@ -11,6 +11,7 @@ var _View = require("@instructure/ui-view/lib/View");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Item;
 /*
  * The MIT License (MIT)
@@ -35,7 +36,6 @@ var _dec, _class, _Item;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Flex
@@ -78,7 +78,8 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null)
       styles = _this$props3.styles;
     const dirColumn = direction === 'column';
     const dirRow = direction === 'row';
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, props, {
+    return (0, _jsxRuntime.jsx)(_View.View, {
+      ...props,
       css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
       elementRef: this.handleRef,
       as: as,
@@ -89,8 +90,9 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null)
       padding: padding,
       overflowX: overflowX,
       overflowY: overflowY || (dirColumn ? 'auto' : 'visible'),
-      withVisualDebug: withVisualDebug
-    }), children);
+      withVisualDebug: withVisualDebug,
+      children: children
+    });
   }
 }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.propTypes = _props.propTypes, _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
   as: 'span',