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

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

@@ -22,7 +22,7 @@ var _TimeSelect, _TimeSelect2, _TimeSelect3, _TimeSelect4, _TimeSelect5, _TimeSe
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react';
+
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
@@ -35,6 +35,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check';
 import { ApplyLocale } from '@instructure/ui-i18n';
 import { TimeSelect } from '../index';
 import TimeSelectExamples from '../__examples__/TimeSelect.examples';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<TimeSelect />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -49,7 +50,7 @@ describe('<TimeSelect />', () => {
   });
   it('should fire onFocus when input gains focus', async () => {
     const onFocus = vi.fn();
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       onFocus: onFocus
     }));
@@ -62,7 +63,7 @@ describe('<TimeSelect />', () => {
   it('should render a default value', async () => {
     const defaultValue = moment.tz('1986-05-17T18:00:00.000Z', moment.ISO_8601, 'en', 'US/Eastern');
     const onChange = vi.fn();
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       onChange: onChange,
       timezone: "US/Eastern",
@@ -74,7 +75,7 @@ describe('<TimeSelect />', () => {
   it('should display value when both defaultValue and value are set', async () => {
     const value = moment.tz('1986-05-17T18:00:00.000Z', moment.ISO_8601, 'en', 'US/Eastern');
     const defaultValue = moment.tz('1986-05-25T19:00:00.000Z', moment.ISO_8601, 'en', 'US/Eastern');
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       timezone: "US/Eastern",
       value: value.toISOString(),
@@ -84,7 +85,7 @@ describe('<TimeSelect />', () => {
     expect(input).toHaveValue(value.format('LT'));
   });
   it('should default to the first option if defaultToFirstOption is true', async () => {
-    render(_TimeSelect || (_TimeSelect = /*#__PURE__*/React.createElement(TimeSelect, {
+    render(_TimeSelect || (_TimeSelect = _jsx(TimeSelect, {
       renderLabel: "Choose a time",
       defaultToFirstOption: true
     })));
@@ -93,7 +94,7 @@ describe('<TimeSelect />', () => {
   });
   it('should use the specified timezone', async () => {
     const value = moment.tz('2024-01-11T13:00:00.000Z', moment.ISO_8601, 'fr', 'UTC');
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       locale: "fr",
       timezone: "Africa/Nairobi" // UTC + 3
@@ -107,7 +108,7 @@ describe('<TimeSelect />', () => {
     const value = moment.tz('2024-01-11T13:00:00.000Z', moment.ISO_8601, 'fr',
     // 24-hour clock
     'UTC');
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       locale: "en" // 12-hour clock
       ,
@@ -122,7 +123,7 @@ describe('<TimeSelect />', () => {
     );
     const valueWinter = moment.tz('2024-01-11T13:00:00.000Z', moment.ISO_8601, 'en', 'UTC' // no time offset
     );
-    const _render = render(/*#__PURE__*/React.createElement(TimeSelect, {
+    const _render = render(_jsx(TimeSelect, {
         renderLabel: "Choose a time",
         locale: "en",
         timezone: "Europe/London" // summer time offset
@@ -132,7 +133,7 @@ describe('<TimeSelect />', () => {
       rerender = _render.rerender;
     const input = screen.getByRole('combobox');
     expect(input).toHaveValue('2:00 PM');
-    rerender(/*#__PURE__*/React.createElement(TimeSelect, {
+    rerender(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       locale: "en",
       timezone: "Europe/London" // summer time offset
@@ -147,15 +148,17 @@ describe('<TimeSelect />', () => {
     // 12-hour clock format
     'UTC' // no time offset
     );
-    render(/*#__PURE__*/React.createElement(ApplyLocale, {
+    render(_jsx(ApplyLocale, {
       locale: "fr" // 24-hour clock format
       ,
       timezone: "Africa/Nairobi" // UTC + 3
-    }, /*#__PURE__*/React.createElement(TimeSelect, {
-      renderLabel: "Choose a time",
-      step: 15,
-      value: value.toISOString()
-    })));
+      ,
+      children: _jsx(TimeSelect, {
+        renderLabel: "Choose a time",
+        step: 15,
+        value: value.toISOString()
+      })
+    }));
     const input = screen.getByRole('combobox');
     expect(input).toHaveValue('20:30');
   });
@@ -163,7 +166,7 @@ describe('<TimeSelect />', () => {
     const onChange = vi.fn();
     const onKeyDown = vi.fn();
     const handleInputChange = vi.fn();
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       allowNonStepInput: true,
       locale: "en_AU",
@@ -189,7 +192,7 @@ describe('<TimeSelect />', () => {
     // 2:00 PM in US/Eastern
     moment.ISO_8601, 'en', 'US/Eastern');
     const onChange = vi.fn();
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       allowClearingSelection: true,
       renderLabel: "Choose a time",
       allowNonStepInput: true,
@@ -215,7 +218,7 @@ describe('<TimeSelect />', () => {
     const onChange = vi.fn();
     const onKeyDown = vi.fn();
     const handleInputChange = vi.fn();
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       allowNonStepInput: true,
       locale: "en_AU",
@@ -243,7 +246,7 @@ describe('<TimeSelect />', () => {
     const onChange = vi.fn();
     const onKeyDown = vi.fn();
     const handleInputChange = vi.fn();
-    render(/*#__PURE__*/React.createElement(TimeSelect, {
+    render(_jsx(TimeSelect, {
       renderLabel: "Choose a time",
       allowNonStepInput: true,
       locale: "en_AU",
@@ -268,7 +271,7 @@ describe('<TimeSelect />', () => {
   });
   describe('input', () => {
     it('should render with a custom id if given', async () => {
-      render(_TimeSelect2 || (_TimeSelect2 = /*#__PURE__*/React.createElement(TimeSelect, {
+      render(_TimeSelect2 || (_TimeSelect2 = _jsx(TimeSelect, {
         renderLabel: "Choose a time",
         id: "timeSelect"
       })));
@@ -276,7 +279,7 @@ describe('<TimeSelect />', () => {
       expect(input).toHaveAttribute('id', 'timeSelect');
     });
     it('should render readonly when interaction="readonly"', async () => {
-      render(_TimeSelect3 || (_TimeSelect3 = /*#__PURE__*/React.createElement(TimeSelect, {
+      render(_TimeSelect3 || (_TimeSelect3 = _jsx(TimeSelect, {
         renderLabel: "Choose a time",
         interaction: "readonly"
       })));
@@ -285,7 +288,7 @@ describe('<TimeSelect />', () => {
       expect(input).not.toHaveAttribute('disabled');
     });
     it('should render disabled when interaction="disabled"', async () => {
-      render(_TimeSelect4 || (_TimeSelect4 = /*#__PURE__*/React.createElement(TimeSelect, {
+      render(_TimeSelect4 || (_TimeSelect4 = _jsx(TimeSelect, {
         renderLabel: "Choose a time",
         interaction: "disabled"
       })));
@@ -294,7 +297,7 @@ describe('<TimeSelect />', () => {
       expect(input).not.toHaveAttribute('readonly');
     });
     it('should render required when isRequired is true', async () => {
-      render(_TimeSelect5 || (_TimeSelect5 = /*#__PURE__*/React.createElement(TimeSelect, {
+      render(_TimeSelect5 || (_TimeSelect5 = _jsx(TimeSelect, {
         renderLabel: "Choose a time",
         isRequired: true
       })));
@@ -302,7 +305,7 @@ describe('<TimeSelect />', () => {
       expect(input).toHaveAttribute('required');
     });
     it('should allow custom props to pass through', async () => {
-      render(_TimeSelect6 || (_TimeSelect6 = /*#__PURE__*/React.createElement(TimeSelect, {
+      render(_TimeSelect6 || (_TimeSelect6 = _jsx(TimeSelect, {
         renderLabel: "Choose a time",
         "data-custom-attr": "true"
       })));
@@ -311,7 +314,7 @@ describe('<TimeSelect />', () => {
     });
     it('should provide a ref to the input element', async () => {
       const inputRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(TimeSelect, {
+      render(_jsx(TimeSelect, {
         renderLabel: "Choose a time",
         inputRef: inputRef
       }));
@@ -322,7 +325,7 @@ describe('<TimeSelect />', () => {
   describe('list', () => {
     it('should provide a ref to the list element', async () => {
       const listRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(TimeSelect, {
+      render(_jsx(TimeSelect, {
         renderLabel: "Choose a time",
         listRef: listRef
       }));

package/es/TimeSelect/index.js

@@ -25,12 +25,13 @@ var _dec, _dec2, _class, _TimeSelect;
  * SOFTWARE.
  */
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { ApplyLocaleContext, Locale, DateTime } from '@instructure/ui-i18n';
 import { getInteraction, passthroughProps, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Select } from '@instructure/ui-select';
 import { allowedProps, propTypes } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -419,20 +420,21 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     return filteredOptions.map(option => {
       const id = option.id,
         label = option.label;
-      return /*#__PURE__*/React.createElement(Select.Option, {
+      return _jsx(Select.Option, {
         id: id,
-        key: id,
         isHighlighted: id === highlightedOptionId,
-        isSelected: id === selectedOptionId
-      }, label);
+        isSelected: id === selectedOptionId,
+        children: label
+      }, id);
     });
   }
   renderEmptyOption() {
-    return /*#__PURE__*/React.createElement(Select.Option, {
+    return _jsx(Select.Option, {
       id: this._emptyOptionId,
       isHighlighted: false,
-      isSelected: false
-    }, callRenderProp(this.props.renderEmptyOption));
+      isSelected: false,
+      children: callRenderProp(this.props.renderEmptyOption)
+    });
   }
   render() {
     const _this$props12 = this.props,
@@ -465,7 +467,7 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     const _this$state5 = this.state,
       inputValue = _this$state5.inputValue,
       isShowingOptions = _this$state5.isShowingOptions;
-    return /*#__PURE__*/React.createElement(Select, Object.assign({
+    return _jsx(Select, {
       mountNode: mountNode,
       renderLabel: renderLabel,
       inputValue: inputValue,
@@ -493,8 +495,10 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
       onInputChange: this.handleInputChange,
-      onKeyDown: this.onKeyDown
-    }, passthroughProps(rest)), isShowingOptions && this.renderOptions());
+      onKeyDown: this.onKeyDown,
+      ...passthroughProps(rest),
+      children: isShowingOptions && this.renderOptions()
+    });
   }
 }, _TimeSelect.displayName = "TimeSelect", _TimeSelect.componentId = 'TimeSelect', _TimeSelect.allowedProps = allowedProps, _TimeSelect.propTypes = propTypes, _TimeSelect.defaultProps = {
   defaultToFirstOption: false,

package/lib/TimeSelect/__new-tests__/TimeSelect.test.js

@@ -1,8 +1,7 @@
 "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");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
@@ -12,6 +11,7 @@ var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _ApplyLocale = require("@instructure/ui-i18n/lib/ApplyLocale");
 var _index = require("../index");
 var _TimeSelect7 = _interopRequireDefault(require("../__examples__/TimeSelect.examples"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _TimeSelect, _TimeSelect2, _TimeSelect3, _TimeSelect4, _TimeSelect5, _TimeSelect6;
 /*
  * The MIT License (MIT)
@@ -51,72 +51,72 @@ describe('<TimeSelect />', () => {
   });
   it('should fire onFocus when input gains focus', async () => {
     const onFocus = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       onFocus: onFocus
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     input.focus();
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       expect(onFocus).toHaveBeenCalled();
     });
   });
   it('should render a default value', async () => {
     const defaultValue = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
     const onChange = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       onChange: onChange,
       timezone: "US/Eastern",
       defaultValue: defaultValue.toISOString()
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue('2:00 PM');
   });
   it('should display value when both defaultValue and value are set', async () => {
     const value = _momentTimezone.default.tz('1986-05-17T18:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
     const defaultValue = _momentTimezone.default.tz('1986-05-25T19:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       timezone: "US/Eastern",
       value: value.toISOString(),
       defaultValue: defaultValue.toISOString()
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue(value.format('LT'));
   });
   it('should default to the first option if defaultToFirstOption is true', async () => {
-    (0, _react2.render)(_TimeSelect || (_TimeSelect = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)(_TimeSelect || (_TimeSelect = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       defaultToFirstOption: true
     })));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue('12:00 AM');
   });
   it('should use the specified timezone', async () => {
     const value = _momentTimezone.default.tz('2024-01-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'fr', 'UTC');
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       locale: "fr",
       timezone: "Africa/Nairobi" // UTC + 3
       ,
       value: value.toISOString()
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue('16:00');
   });
   it('should use the specified locale', async () => {
     const value = _momentTimezone.default.tz('2024-01-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'fr',
     // 24-hour clock
     'UTC');
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       locale: "en" // 12-hour clock
       ,
       timezone: "UTC",
       value: value.toISOString()
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue('1:00 PM');
   });
   it('should handle winter and summer time based on timezone', async () => {
@@ -124,7 +124,7 @@ describe('<TimeSelect />', () => {
     );
     const valueWinter = _momentTimezone.default.tz('2024-01-11T13:00:00.000Z', _momentTimezone.default.ISO_8601, 'en', 'UTC' // no time offset
     );
-    const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         locale: "en",
         timezone: "Europe/London" // summer time offset
@@ -132,16 +132,16 @@ describe('<TimeSelect />', () => {
         value: valueSummer.toISOString()
       })),
       rerender = _render.rerender;
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue('2:00 PM');
-    rerender(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    rerender((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       locale: "en",
       timezone: "Europe/London" // summer time offset
       ,
       value: valueWinter.toISOString()
     }));
-    const inputUpdated = _react2.screen.getByRole('combobox');
+    const inputUpdated = _react.screen.getByRole('combobox');
     expect(inputUpdated).toHaveValue('1:00 PM');
   });
   it('should read locale and timezone from context', async () => {
@@ -149,23 +149,25 @@ describe('<TimeSelect />', () => {
     // 12-hour clock format
     'UTC' // no time offset
     );
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ApplyLocale.ApplyLocale, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_ApplyLocale.ApplyLocale, {
       locale: "fr" // 24-hour clock format
       ,
       timezone: "Africa/Nairobi" // UTC + 3
-    }, /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
-      renderLabel: "Choose a time",
-      step: 15,
-      value: value.toISOString()
-    })));
-    const input = _react2.screen.getByRole('combobox');
+      ,
+      children: (0, _jsxRuntime.jsx)(_index.TimeSelect, {
+        renderLabel: "Choose a time",
+        step: 15,
+        value: value.toISOString()
+      })
+    }));
+    const input = _react.screen.getByRole('combobox');
     expect(input).toHaveValue('20:30');
   });
   it('adding event listeners does not break functionality', async () => {
     const onChange = _vitest.vi.fn();
     const onKeyDown = _vitest.vi.fn();
     const handleInputChange = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       allowNonStepInput: true,
       locale: "en_AU",
@@ -174,9 +176,9 @@ describe('<TimeSelect />', () => {
       onInputChange: handleInputChange,
       onKeyDown: onKeyDown
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     await _userEvent.default.type(input, '7:45 PM');
-    _react2.fireEvent.blur(input); // sends onChange event
+    _react.fireEvent.blur(input); // sends onChange event
 
     expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       inputText: '7:45 PM',
@@ -191,7 +193,7 @@ describe('<TimeSelect />', () => {
     // 2:00 PM in US/Eastern
     _momentTimezone.default.ISO_8601, 'en', 'US/Eastern');
     const onChange = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       allowClearingSelection: true,
       renderLabel: "Choose a time",
       allowNonStepInput: true,
@@ -200,9 +202,9 @@ describe('<TimeSelect />', () => {
       defaultValue: defaultValue.toISOString(),
       onChange: onChange
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     await _userEvent.default.type(input, '{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    _react2.fireEvent.blur(input); // sends onChange event
+    _react.fireEvent.blur(input); // sends onChange event
 
     expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       inputText: '',
@@ -217,7 +219,7 @@ describe('<TimeSelect />', () => {
     const onChange = _vitest.vi.fn();
     const onKeyDown = _vitest.vi.fn();
     const handleInputChange = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       allowNonStepInput: true,
       locale: "en_AU",
@@ -227,9 +229,9 @@ describe('<TimeSelect />', () => {
       onInputChange: handleInputChange,
       onKeyDown: onKeyDown
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     await _userEvent.default.type(input, '{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}7:45 PM');
-    _react2.fireEvent.blur(input); // sends onChange event
+    _react.fireEvent.blur(input); // sends onChange event
     expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       inputText: '7:45 PM',
       value: '1986-05-17T23:45:00.000Z'
@@ -245,7 +247,7 @@ describe('<TimeSelect />', () => {
     const onChange = _vitest.vi.fn();
     const onKeyDown = _vitest.vi.fn();
     const handleInputChange = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
       renderLabel: "Choose a time",
       allowNonStepInput: true,
       locale: "en_AU",
@@ -255,11 +257,11 @@ describe('<TimeSelect />', () => {
       onInputChange: handleInputChange,
       onKeyDown: onKeyDown
     }));
-    const input = _react2.screen.getByRole('combobox');
+    const input = _react.screen.getByRole('combobox');
     await _userEvent.default.type(input, '{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}7:45 PM');
-    _react2.fireEvent.blur(input); // sends onChange event
+    _react.fireEvent.blur(input); // sends onChange event
     await _userEvent.default.type(input, 'asdf');
-    _react2.fireEvent.blur(input);
+    _react.fireEvent.blur(input);
     expect(onChange).toHaveBeenCalledWith(expect.anything(), {
       inputText: '7:45 PM',
       value: '1986-05-17T23:45:00.000Z'
@@ -270,68 +272,68 @@ describe('<TimeSelect />', () => {
   });
   describe('input', () => {
     it('should render with a custom id if given', async () => {
-      (0, _react2.render)(_TimeSelect2 || (_TimeSelect2 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)(_TimeSelect2 || (_TimeSelect2 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         id: "timeSelect"
       })));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       expect(input).toHaveAttribute('id', 'timeSelect');
     });
     it('should render readonly when interaction="readonly"', async () => {
-      (0, _react2.render)(_TimeSelect3 || (_TimeSelect3 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)(_TimeSelect3 || (_TimeSelect3 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         interaction: "readonly"
       })));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       expect(input).toHaveAttribute('readonly');
       expect(input).not.toHaveAttribute('disabled');
     });
     it('should render disabled when interaction="disabled"', async () => {
-      (0, _react2.render)(_TimeSelect4 || (_TimeSelect4 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)(_TimeSelect4 || (_TimeSelect4 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         interaction: "disabled"
       })));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       expect(input).toHaveAttribute('disabled');
       expect(input).not.toHaveAttribute('readonly');
     });
     it('should render required when isRequired is true', async () => {
-      (0, _react2.render)(_TimeSelect5 || (_TimeSelect5 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)(_TimeSelect5 || (_TimeSelect5 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         isRequired: true
       })));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       expect(input).toHaveAttribute('required');
     });
     it('should allow custom props to pass through', async () => {
-      (0, _react2.render)(_TimeSelect6 || (_TimeSelect6 = /*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)(_TimeSelect6 || (_TimeSelect6 = (0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         "data-custom-attr": "true"
       })));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       expect(input).toHaveAttribute('data-custom-attr', 'true');
     });
     it('should provide a ref to the input element', async () => {
       const inputRef = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         inputRef: inputRef
       }));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       expect(inputRef).toHaveBeenCalledWith(input);
     });
   });
   describe('list', () => {
     it('should provide a ref to the list element', async () => {
       const listRef = _vitest.vi.fn();
-      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TimeSelect, {
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.TimeSelect, {
         renderLabel: "Choose a time",
         listRef: listRef
       }));
-      const input = _react2.screen.getByRole('combobox');
+      const input = _react.screen.getByRole('combobox');
       await _userEvent.default.click(input);
-      await (0, _react2.waitFor)(() => {
-        const listbox = _react2.screen.getByRole('listbox');
+      await (0, _react.waitFor)(() => {
+        const listbox = _react.screen.getByRole('listbox');
         expect(listRef).toHaveBeenCalledWith(listbox);
       });
     });
@@ -341,7 +343,7 @@ describe('<TimeSelect />', () => {
     it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
-      const _render2 = (0, _react2.render)(content),
+      const _render2 = (0, _react.render)(content),
         container = _render2.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);