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

package/es/Options/Item/__new-tests__/Item.test.js

@@ -23,7 +23,6 @@ var _Item, _Item2, _Item3, _Item4, _Item5, _Item6, _Item7, _Item8, _Item9, _Item
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { vi, expect } from 'vitest';
 import userEvent from '@testing-library/user-event';
@@ -31,9 +30,10 @@ import '@testing-library/jest-dom';
 import { IconCheckSolid } from '@instructure/ui-icons';
 import { Options } from '../../index';
 import { Item } from '../index';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<Item />', () => {
   it('should render', async () => {
-    const _render = render(_Item || (_Item = /*#__PURE__*/React.createElement(Item, null))),
+    const _render = render(_Item || (_Item = _jsx(Item, {}))),
       container = _render.container;
     const optionItem = container.querySelector('[class$="-optionItem"]');
     expect(optionItem).toBeInTheDocument();
@@ -41,34 +41,41 @@ describe('<Item />', () => {
     expect(optionItemContainer).toBeInTheDocument();
   });
   it('should not render as a list item by default', async () => {
-    const _render2 = render(_Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, null, "Hello World"))),
+    const _render2 = render(_Item2 || (_Item2 = _jsx(Item, {
+        children: "Hello World"
+      }))),
       container = _render2.container;
     const item = container.querySelector('[class$="-optionItem"]');
     expect(item).toBeInTheDocument();
     expect(item.tagName).not.toBe('LI');
   });
   it('should render designated tag if `as` prop is specified', async () => {
-    const _render3 = render(_Item3 || (_Item3 = /*#__PURE__*/React.createElement(Item, {
-        as: "li"
-      }, "Hello World"))),
+    const _render3 = render(_Item3 || (_Item3 = _jsx(Item, {
+        as: "li",
+        children: "Hello World"
+      }))),
       container = _render3.container;
     const item = container.querySelector('[class$="-optionItem"]');
     expect(item).toBeInTheDocument();
     expect(item.tagName).toBe('LI');
   });
   it('should render children properly', async () => {
-    const _render4 = render(_Item4 || (_Item4 = /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement("span", {
-        id: "customContent"
-      }, "Hello World")))),
+    const _render4 = render(_Item4 || (_Item4 = _jsx(Item, {
+        children: _jsx("span", {
+          id: "customContent",
+          children: "Hello World"
+        })
+      }))),
       container = _render4.container;
     const item = container.querySelector('[class$="-optionItem"]');
     const customContent = item.querySelector('#customContent');
     expect(customContent).toHaveTextContent('Hello World');
   });
   it('should render role attributes appropriately when given a role', async () => {
-    const _render5 = render(_Item5 || (_Item5 = /*#__PURE__*/React.createElement(Item, {
-        role: "option"
-      }, "Hello World"))),
+    const _render5 = render(_Item5 || (_Item5 = _jsx(Item, {
+        role: "option",
+        children: "Hello World"
+      }))),
       container = _render5.container;
     const item = container.querySelector('[class$="-optionItem"]');
     const child = screen.getByRole('option');
@@ -76,11 +83,13 @@ describe('<Item />', () => {
     expect(child).toBeInTheDocument();
   });
   it('should render description properly', async () => {
-    const _render6 = render(_Item6 || (_Item6 = /*#__PURE__*/React.createElement(Item, {
-        description: "Some text as description"
-      }, /*#__PURE__*/React.createElement("span", {
-        id: "customContent"
-      }, "Hello World")))),
+    const _render6 = render(_Item6 || (_Item6 = _jsx(Item, {
+        description: "Some text as description",
+        children: _jsx("span", {
+          id: "customContent",
+          children: "Hello World"
+        })
+      }))),
       container = _render6.container;
     const item = container.querySelector('[class$="-optionItem"]');
     const customContent = item.querySelector('#customContent');
@@ -89,20 +98,22 @@ describe('<Item />', () => {
     expect(description).toHaveTextContent('Some text as description');
   });
   it('should render role attributes for description', async () => {
-    render(_Item7 || (_Item7 = /*#__PURE__*/React.createElement(Item, {
+    render(_Item7 || (_Item7 = _jsx(Item, {
       description: "Some text as description",
-      descriptionRole: "comment"
-    }, "Hello World")));
+      descriptionRole: "comment",
+      children: "Hello World"
+    })));
     const description = screen.getByRole('comment');
     expect(description).toBeInTheDocument();
     expect(description).toHaveTextContent('Some text as description');
   });
   it('should pass props through to label', async () => {
-    const _render7 = render(_Item8 || (_Item8 = /*#__PURE__*/React.createElement(Item, {
+    const _render7 = render(_Item8 || (_Item8 = _jsx(Item, {
         role: "option",
         tabIndex: -1,
-        "data-custom-attr": "true"
-      }, "Hello World"))),
+        "data-custom-attr": "true",
+        children: "Hello World"
+      }))),
       container = _render7.container;
     const optionItem = container.querySelector('[class$="-optionItem"]');
     const optionItemContainer = optionItem.querySelector('[class$="-optionItem__container"]');
@@ -113,9 +124,10 @@ describe('<Item />', () => {
   });
   it('should pass event handlers through to label', async () => {
     const onClick = vi.fn();
-    const _render8 = render(/*#__PURE__*/React.createElement(Item, {
-        onClick: onClick
-      }, "Hello World")),
+    const _render8 = render(_jsx(Item, {
+        onClick: onClick,
+        children: "Hello World"
+      })),
       container = _render8.container;
     const optionItem = container.querySelector('[class$="-optionItem"]');
     const optionItemContainer = container.querySelector('[class$="-optionItem__container"]');
@@ -129,9 +141,10 @@ describe('<Item />', () => {
     });
   });
   it('should render content before label', async () => {
-    const _render9 = render(_Item9 || (_Item9 = /*#__PURE__*/React.createElement(Item, {
-        renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
-      }, "Hello World"))),
+    const _render9 = render(_Item9 || (_Item9 = _jsx(Item, {
+        renderBeforeLabel: _jsx(IconCheckSolid, {}),
+        children: "Hello World"
+      }))),
       container = _render9.container;
     const content = container.querySelector('[class$=-optionItem__content--before]');
     expect(content).toBeInTheDocument();
@@ -139,9 +152,10 @@ describe('<Item />', () => {
     expect(icon).toBeInTheDocument();
   });
   it('should render content after label', async () => {
-    const _render10 = render(_Item10 || (_Item10 = /*#__PURE__*/React.createElement(Item, {
-        renderAfterLabel: /*#__PURE__*/React.createElement(IconCheckSolid, null)
-      }, "Hello World"))),
+    const _render10 = render(_Item10 || (_Item10 = _jsx(Item, {
+        renderAfterLabel: _jsx(IconCheckSolid, {}),
+        children: "Hello World"
+      }))),
       container = _render10.container;
     const content = container.querySelector('[class$=-optionItem__content--after]');
     expect(content).toBeInTheDocument();
@@ -149,10 +163,15 @@ describe('<Item />', () => {
     expect(icon).toBeInTheDocument();
   });
   it('should render nested lists', async () => {
-    const _render11 = render(_Item11 || (_Item11 = /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Options, {
-        as: "ul",
-        renderLabel: 'Nested list'
-      }, /*#__PURE__*/React.createElement(Item, null, "Sub item"))))),
+    const _render11 = render(_Item11 || (_Item11 = _jsx(Item, {
+        children: _jsx(Options, {
+          as: "ul",
+          renderLabel: 'Nested list',
+          children: _jsx(Item, {
+            children: "Sub item"
+          })
+        })
+      }))),
       container = _render11.container;
     const item = container.querySelector('span[class$="-optionItem"]');
     expect(item).toBeInTheDocument();
@@ -165,9 +184,10 @@ describe('<Item />', () => {
     expect(nestedItem).toHaveTextContent('Sub item');
   });
   it('should render as link with href prop', async () => {
-    const _render12 = render(_Item12 || (_Item12 = /*#__PURE__*/React.createElement(Item, {
-        href: "/helloWorld"
-      }, "Hello World"))),
+    const _render12 = render(_Item12 || (_Item12 = _jsx(Item, {
+        href: "/helloWorld",
+        children: "Hello World"
+      }))),
       container = _render12.container;
     const link = container.querySelector('[class$="-optionItem__container"]');
     expect(link).toBeInTheDocument();

package/es/Options/Item/index.js

@@ -23,11 +23,10 @@ var _dec, _dec2, _dec3, _class, _Item;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { omitProps, getElementType, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -38,6 +37,7 @@ parent: Options
 id: Options.Item
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Item = class Item extends Component {
   constructor(props) {
     super(props);
@@ -60,16 +60,17 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
       as = _this$props3.as,
       role = _this$props3.role,
       children = _this$props3.children;
-    return jsx("span", {
+    return _jsx("span", {
       css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
       role: "presentation",
-      "aria-hidden": "true"
-    }, callRenderProp(renderLabel, {
-      variant,
-      as,
-      role,
-      children
-    }));
+      "aria-hidden": "true",
+      children: callRenderProp(renderLabel, {
+        variant,
+        as,
+        role,
+        children
+      })
+    });
   }
   render() {
     const _this$props4 = this.props,
@@ -90,7 +91,7 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
     const childrenContent = callRenderProp(children);
     const descriptionContent = callRenderProp(description);
     const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
-    return jsx(ElementType, {
+    return _jsxs(ElementType, {
       role: voiceoverRoleBugWorkaround ? role : 'none',
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       ref: element => {
@@ -99,17 +100,21 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
           elementRef(element);
         }
       },
-      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0
-    }, jsx(InnerElementType, Object.assign({}, passthroughProps, {
-      css: styles === null || styles === void 0 ? void 0 : styles.container,
-      role: href || voiceoverRoleBugWorkaround ? void 0 : role,
-      href: href,
-      "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy
-    }), childrenContent, descriptionContent && jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.description,
-      role: descriptionRole,
-      id: this._descriptionId
-    }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
+      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0,
+      children: [_jsxs(InnerElementType, {
+        ...passthroughProps,
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        role: href || voiceoverRoleBugWorkaround ? void 0 : role,
+        href: href,
+        "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy,
+        children: [childrenContent, descriptionContent && _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.description,
+          role: descriptionRole,
+          id: this._descriptionId,
+          children: descriptionContent
+        })]
+      }), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter)]
+    });
   }
 }, _Item.displayName = "Item", _Item.componentId = 'Options.Item', _Item.allowedProps = allowedProps, _Item.propTypes = propTypes, _Item.defaultProps = {
   as: 'span',

package/es/Options/Separator/index.js

@@ -25,10 +25,9 @@ var _dec, _class, _Separator;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { getElementType, omitProps } from '@instructure/ui-react-utils';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -40,6 +39,7 @@ id: Options.Separator
 ---
 @module Separator
 **/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_Separator = class Separator extends Component {
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -55,12 +55,14 @@ let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(
       styles = _this$props3.styles,
       rest = _objectWithoutProperties(_this$props3, _excluded);
     const ElementType = getElementType(Separator, this.props, () => as);
-    return jsx(ElementType, {
-      role: "none"
-    }, jsx("div", Object.assign({}, omitProps(rest, ['styles', 'makeStyles', 'themeOverride']), {
-      css: styles === null || styles === void 0 ? void 0 : styles.separator,
-      role: "presentation"
-    })));
+    return _jsx(ElementType, {
+      role: "none",
+      children: _jsx("div", {
+        ...omitProps(rest, ['styles', 'makeStyles', 'themeOverride']),
+        css: styles === null || styles === void 0 ? void 0 : styles.separator,
+        role: "presentation"
+      })
+    });
   }
 }, _Separator.displayName = "Separator", _Separator.componentId = 'Options.Separator', _Separator.allowedProps = allowedProps, _Separator.propTypes = propTypes, _Separator.defaultProps = {
   as: 'span'

package/es/Options/__examples__/Options.examples.js

@@ -22,53 +22,52 @@
  * SOFTWARE.
  */
 
-import React from 'react';
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
 import { Options } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export default {
   maxExamplesPerPage: 50,
   propValues: {
-    children: [[/*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-1"
-    }, "Option one"), /*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-2",
-      variant: "highlighted"
-    }, "Option two"), /*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-3",
-      variant: "selected"
-    }, "Option three"), /*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-4",
-      variant: "disabled"
-    }, "Option four")], [/*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-1",
+    children: [[_jsx(Options.Item, {
+      children: "Option one"
+    }, "option-1"), _jsx(Options.Item, {
       variant: "highlighted",
-      renderAfterLabel: IconArrowOpenEndSolid
-    }, "Flyout menu option"), /*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-2"
-    }, "Option one"), /*#__PURE__*/React.createElement(Options.Separator, {
-      key: "sep-1"
-    }), /*#__PURE__*/React.createElement(Options, {
-      key: "sub-list",
-      renderLabel: 'Sub list'
-    }, /*#__PURE__*/React.createElement(Options.Item, {
-      variant: "selected"
-    }, "Sub option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Sub option two")), /*#__PURE__*/React.createElement(Options.Separator, {
-      key: "sep-2"
-    }), /*#__PURE__*/React.createElement(Options, {
-      key: "icon-list",
-      renderLabel: 'Icon List'
-    }, /*#__PURE__*/React.createElement(Options.Item, {
-      renderBeforeLabel: IconCheckSolid
-    }, "Icon option one"), /*#__PURE__*/React.createElement(Options.Item, {
-      renderBeforeLabel: /*#__PURE__*/React.createElement(IconCheckSolid, {
-        style: {
-          opacity: 0
-        }
-      })
-    }, "Icon option two")), /*#__PURE__*/React.createElement(Options.Separator, {
-      key: "sep-3"
-    }), /*#__PURE__*/React.createElement(Options.Item, {
-      key: "option-3"
-    }, "Option two")]]
+      children: "Option two"
+    }, "option-2"), _jsx(Options.Item, {
+      variant: "selected",
+      children: "Option three"
+    }, "option-3"), _jsx(Options.Item, {
+      variant: "disabled",
+      children: "Option four"
+    }, "option-4")], [_jsx(Options.Item, {
+      variant: "highlighted",
+      renderAfterLabel: IconArrowOpenEndSolid,
+      children: "Flyout menu option"
+    }, "option-1"), _jsx(Options.Item, {
+      children: "Option one"
+    }, "option-2"), _jsx(Options.Separator, {}, "sep-1"), _jsxs(Options, {
+      renderLabel: 'Sub list',
+      children: [_jsx(Options.Item, {
+        variant: "selected",
+        children: "Sub option one"
+      }), _jsx(Options.Item, {
+        children: "Sub option two"
+      })]
+    }, "sub-list"), _jsx(Options.Separator, {}, "sep-2"), _jsxs(Options, {
+      renderLabel: 'Icon List',
+      children: [_jsx(Options.Item, {
+        renderBeforeLabel: IconCheckSolid,
+        children: "Icon option one"
+      }), _jsx(Options.Item, {
+        renderBeforeLabel: _jsx(IconCheckSolid, {
+          style: {
+            opacity: 0
+          }
+        }),
+        children: "Icon option two"
+      })]
+    }, "icon-list"), _jsx(Options.Separator, {}, "sep-3"), _jsx(Options.Item, {
+      children: "Option two"
+    }, "option-3")]]
   }
 };

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

@@ -23,7 +23,6 @@ var _Options, _Options2, _Options$Item, _Options$Item2, _Options3, _Options4, _O
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi, expect } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
@@ -33,38 +32,60 @@ import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11y
 import '@testing-library/jest-dom';
 import { Options } from '../index';
 import OptionsExamples from '../__examples__/Options.examples';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Options />', () => {
   it('should render', async () => {
-    const _render = render(_Options || (_Options = /*#__PURE__*/React.createElement(Options, null))),
+    const _render = render(_Options || (_Options = _jsx(Options, {}))),
       container = _render.container;
-    const options = container.querySelector('div[class$="-options"]');
+    const options = container.querySelector('div[class*="-options"]');
     expect(options).toBeInTheDocument();
   });
   it('should render items', async () => {
-    render(_Options2 || (_Options2 = /*#__PURE__*/React.createElement(Options, null, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two"))));
+    render(_Options2 || (_Options2 = _jsxs(Options, {
+      children: [_jsx(Options.Item, {
+        children: "Option one"
+      }), _jsx(Options.Item, {
+        children: "Option two"
+      })]
+    })));
     const items = screen.getAllByRole('listitem');
     expect(items.length).toBe(2);
   });
   it('should provide elementRef', async () => {
     const elementRef = vi.fn();
-    render(/*#__PURE__*/React.createElement(Options, {
+    render(_jsxs(Options, {
       elementRef: elementRef,
-      as: "ul"
-    }, _Options$Item || (_Options$Item = /*#__PURE__*/React.createElement(Options.Item, null, "Option one")), _Options$Item2 || (_Options$Item2 = /*#__PURE__*/React.createElement(Options.Item, null, "Option two"))));
+      as: "ul",
+      children: [_Options$Item || (_Options$Item = _jsx(Options.Item, {
+        children: "Option one"
+      })), _Options$Item2 || (_Options$Item2 = _jsx(Options.Item, {
+        children: "Option two"
+      }))]
+    }));
     const optionList = screen.getByRole('list');
     expect(elementRef).toHaveBeenCalledWith(optionList);
   });
   it('should render designated tag if `as` prop is specified', async () => {
-    render(_Options3 || (_Options3 = /*#__PURE__*/React.createElement(Options, {
-      as: "ol"
-    }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two"))));
+    render(_Options3 || (_Options3 = _jsxs(Options, {
+      as: "ol",
+      children: [_jsx(Options.Item, {
+        children: "Option one"
+      }), _jsx(Options.Item, {
+        children: "Option two"
+      })]
+    })));
     const optionList = screen.getByRole('list');
     expect(optionList.tagName).toBe('OL');
   });
   it('should render children as listitems when appropriate', async () => {
-    const _render2 = render(_Options4 || (_Options4 = /*#__PURE__*/React.createElement(Options, {
-        as: "ul"
-      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two")))),
+    const _render2 = render(_Options4 || (_Options4 = _jsxs(Options, {
+        as: "ul",
+        children: [_jsx(Options.Item, {
+          children: "Option one"
+        }), _jsx(Options.Item, {
+          children: "Option two"
+        })]
+      }))),
       container = _render2.container;
     const list = container.querySelector('ul');
     const items = container.querySelectorAll('li');
@@ -72,44 +93,64 @@ describe('<Options />', () => {
     expect(items.length).toBe(2);
   });
   it('should pass props through to list', async () => {
-    const _render3 = render(_Options5 || (_Options5 = /*#__PURE__*/React.createElement(Options, {
+    const _render3 = render(_Options5 || (_Options5 = _jsxs(Options, {
         as: "ul",
         role: "listbox",
-        "data-custom-attr": "true"
-      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two")))),
+        "data-custom-attr": "true",
+        children: [_jsx(Options.Item, {
+          children: "Option one"
+        }), _jsx(Options.Item, {
+          children: "Option two"
+        })]
+      }))),
       container = _render3.container;
-    const options = container.querySelector('[class$="-options__list"]');
+    const options = container.querySelector('[class*="-options__list"]');
     expect(options).toHaveRole('listbox');
     expect(options).toHaveAttribute('data-custom-attr', 'true');
   });
   it('should render root with appropriate role', async () => {
-    const _render4 = render(_Options6 || (_Options6 = /*#__PURE__*/React.createElement(Options, {
-        role: "listbox"
-      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one"), /*#__PURE__*/React.createElement(Options.Item, null, "Option two")))),
+    const _render4 = render(_Options6 || (_Options6 = _jsxs(Options, {
+        role: "listbox",
+        children: [_jsx(Options.Item, {
+          children: "Option one"
+        }), _jsx(Options.Item, {
+          children: "Option two"
+        })]
+      }))),
       container = _render4.container;
-    const options = container.querySelector('div[class$="-options"]');
+    const options = container.querySelector('div[class*="-options"]');
     expect(options).toHaveAttribute('role', 'presentation');
   });
   it('should allow null children', async () => {
-    render(_Options7 || (_Options7 = /*#__PURE__*/React.createElement(Options, null)));
+    render(_Options7 || (_Options7 = _jsx(Options, {})));
     const options = screen.getByRole('list');
     expect(options).toBeInTheDocument();
   });
   it('should render nested options properly', async () => {
-    const _render5 = render(_Options8 || (_Options8 = /*#__PURE__*/React.createElement(Options, {
-        "data-testId": "outer-list"
-      }, /*#__PURE__*/React.createElement(Options.Item, null, "Option one "), /*#__PURE__*/React.createElement(Options.Item, null, "Option two "), /*#__PURE__*/React.createElement(Options, {
-        renderLabel: 'Nested list',
-        "data-testId": "nested-list"
-      }, /*#__PURE__*/React.createElement(Options.Item, null, "Nested option one "), /*#__PURE__*/React.createElement(Options.Item, null, "Nested option two "))))),
+    const _render5 = render(_Options8 || (_Options8 = _jsxs(Options, {
+        "data-testId": "outer-list",
+        children: [_jsx(Options.Item, {
+          children: "Option one "
+        }), _jsx(Options.Item, {
+          children: "Option two "
+        }), _jsxs(Options, {
+          renderLabel: 'Nested list',
+          "data-testId": "nested-list",
+          children: [_jsx(Options.Item, {
+            children: "Nested option one "
+          }), _jsx(Options.Item, {
+            children: "Nested option two "
+          })]
+        })]
+      }))),
       container = _render5.container;
-    const allLists = container.querySelectorAll('[class$="-options__list"]');
+    const allLists = container.querySelectorAll('[class*="-options__list"]');
     const allItems = container.querySelectorAll('[class$="-optionItem"]');
     expect(allLists.length).toBe(2);
     expect(allItems.length).toBe(5);
     const outerList = screen.getByTestId('outer-list');
     expect(outerList).toHaveTextContent('Option one Option two');
-    const nestedLabel = outerList.querySelector('[class$=-options__label]');
+    const nestedLabel = outerList.querySelector('[class*=-options__label]');
     expect(nestedLabel).toBeInTheDocument();
     expect(nestedLabel).toHaveTextContent('Nested list');
     const nestedList = screen.getByTestId('nested-list');
@@ -138,9 +179,14 @@ describe('<Options />', () => {
   });
   describe('for a11y', () => {
     it('should be accessible with links', async () => {
-      const _render7 = render(_Options9 || (_Options9 = /*#__PURE__*/React.createElement(Options, null, /*#__PURE__*/React.createElement(Options.Item, null, "Option"), /*#__PURE__*/React.createElement(Options.Item, {
-          href: "/"
-        }, "Option link")))),
+      const _render7 = render(_Options9 || (_Options9 = _jsxs(Options, {
+          children: [_jsx(Options.Item, {
+            children: "Option"
+          }), _jsx(Options.Item, {
+            href: "/",
+            children: "Option link"
+          })]
+        }))),
         container = _render7.container;
 
       // axe-check is more strict now, and expects "list" role to have "listitem" children, but we use "role='none'" children. After discussing it with the A11y team, we agreed to ignore this error because the screen readers can read the component perfectly.