@instructure/ui-select 11.7.4-snapshot-14 → 11.7.4-snapshot-49

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.
 
-## [11.7.4-snapshot-14](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-14) (2026-05-20)
+## [11.7.4-snapshot-49](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-49) (2026-06-17)
 
 **Note:** Version bump only for package @instructure/ui-select
 

package/LICENSE.md

@@ -2,6 +2,7 @@
 title: The MIT License (MIT)
 category: Getting Started
 order: 9
+isWIP: true
 ---
 
 # The MIT License (MIT)

package/es/Select/v1/Group/index.js

@@ -23,7 +23,8 @@
  */
 
 import { Component } from 'react';
-import { allowedProps } from "./props.js";
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Select
@@ -32,7 +33,7 @@ id: Select.Group
 @module Group
 **/
 class Group extends Component {
-  static displayName = "Group";
+  static displayName = 'Group';
   static componentId = 'Select.Group';
   static allowedProps = allowedProps;
   static defaultProps = {};

package/es/Select/v1/Option/index.js

@@ -23,7 +23,8 @@
  */
 
 import { Component } from 'react';
-import { allowedProps } from "./props.js";
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Select
@@ -32,7 +33,7 @@ id: Select.Option
 @module Option
 **/
 class Option extends Component {
-  static displayName = "Option";
+  static displayName = 'Option';
   static componentId = 'Select.Option';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Select/v1/index.js

@@ -35,11 +35,11 @@ import { TextInput } from '@instructure/ui-text-input/v11_6';
 import { Options } from '@instructure/ui-options/v11_6';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine } from '@instructure/ui-icons';
 import { withStyle } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { Group } from "./Group/index.js";
-import { Option } from "./Option/index.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import generateComponentTheme from './theme.js';
+import { Group } from './Group/index.js';
+import { Option } from './Option/index.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 // This memoed Option component is used to prevent unnecessary re-renders of
 // Options.Item when the Select component is re-rendered. This is necessary
@@ -75,7 +75,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
 let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Select extends Component {
-  static displayName = "Select";
+  static displayName = 'Select';
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;
   static allowedProps = allowedProps;

package/es/Select/v2/Group/index.js

@@ -23,7 +23,8 @@
  */
 
 import { Component } from 'react';
-import { allowedProps } from "./props.js";
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Select
@@ -32,7 +33,7 @@ id: Select.Group
 @module Group
 **/
 class Group extends Component {
-  static displayName = "Group";
+  static displayName = 'Group';
   static componentId = 'Select.Group';
   static allowedProps = allowedProps;
   static defaultProps = {};

package/es/Select/v2/Option/index.js

@@ -23,7 +23,8 @@
  */
 
 import { Component } from 'react';
-import { allowedProps } from "./props.js";
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Select
@@ -32,7 +33,7 @@ id: Select.Option
 @module Option
 **/
 class Option extends Component {
-  static displayName = "Option";
+  static displayName = 'Option';
   static componentId = 'Select.Option';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Select/v2/index.js

@@ -35,10 +35,10 @@ import { TextInput } from '@instructure/ui-text-input/latest';
 import { Options } from '@instructure/ui-options/latest';
 import { ChevronDownInstUIIcon, ChevronUpInstUIIcon } from '@instructure/ui-icons';
 import { withStyleNew } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import { Group } from "./Group/index.js";
-import { Option } from "./Option/index.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { Group } from './Group/index.js';
+import { Option } from './Option/index.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const selectSizeToIconSize = {
   small: 'sm',
@@ -79,7 +79,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
 let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle), _dec(_class = _dec2(_class = class Select extends Component {
-  static displayName = "Select";
+  static displayName = 'Select';
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;
   static allowedProps = allowedProps;

package/es/exports/a.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Select } from "../Select/v1/index.js";
-export { Group as SelectGroup } from "../Select/v1/Group/index.js";
-export { Option as SelectOption } from "../Select/v1/Option/index.js";
+
+export { Select } from '../Select/v1/index.js';
+export { Group as SelectGroup } from '../Select/v1/Group/index.js';
+export { Option as SelectOption } from '../Select/v1/Option/index.js';

package/es/exports/b.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Select } from "../Select/v2/index.js";
-export { Group as SelectGroup } from "../Select/v2/Group/index.js";
-export { Option as SelectOption } from "../Select/v2/Option/index.js";
+
+export { Select } from '../Select/v2/index.js';
+export { Group as SelectGroup } from '../Select/v2/Group/index.js';
+export { Option as SelectOption } from '../Select/v2/Option/index.js';

package/lib/Select/v1/Group/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Group = void 0;
 var _react = require("react");
-var _props = require("./props");
+var _props = require("./props.js");
 /*
  * The MIT License (MIT)
  *
@@ -38,7 +38,7 @@ id: Select.Group
 @module Group
 **/
 class Group extends _react.Component {
-  static displayName = "Group";
+  static displayName = 'Group';
   static componentId = 'Select.Group';
   static allowedProps = _props.allowedProps;
   static defaultProps = {};

package/lib/Select/v1/Option/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Option = void 0;
 var _react = require("react");
-var _props = require("./props");
+var _props = require("./props.js");
 /*
  * The MIT License (MIT)
  *
@@ -38,7 +38,7 @@ id: Select.Option
 @module Option
 **/
 class Option extends _react.Component {
-  static displayName = "Option";
+  static displayName = 'Option';
   static componentId = 'Select.Option';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/Select/v1/index.js

@@ -23,11 +23,11 @@ var _v11_4 = require("@instructure/ui-options/v11_6");
 var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
 var _IconArrowOpenUpLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _Group = require("./Group");
-var _Option = require("./Option");
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _theme = _interopRequireDefault(require("./theme.js"));
+var _index = require("./Group/index.js");
+var _index2 = require("./Option/index.js");
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class;
 /*
@@ -87,7 +87,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
 let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
-  static displayName = "Select";
+  static displayName = 'Select';
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;
   static allowedProps = _props.allowedProps;
@@ -106,8 +106,8 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     scrollToHighlightedOption: true,
     isOptionContentAppliedToInput: false
   };
-  static Option = _Option.Option;
-  static Group = _Group.Group;
+  static Option = _index2.Option;
+  static Group = _index.Group;
   componentDidMount() {
     this.props.makeStyles?.();
   }
@@ -159,7 +159,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   get highlightedOptionId() {
     let highlightedOptionId;
     this.childrenArray.forEach(child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
         // group found
         this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
@@ -179,7 +179,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   get selectedOptionId() {
     const selectedOptionId = [];
     this.childrenArray.forEach(child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
         // group found
         this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
@@ -333,7 +333,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     };
     let optionProps = {
       // passthrough props
-      ...(0, _omitProps.omitProps)(option.props, [..._Option.Option.allowedProps, ..._v11_4.Options.Item.allowedProps]),
+      ...(0, _omitProps.omitProps)(option.props, [..._index2.Option.allowedProps, ..._v11_4.Options.Item.allowedProps]),
       // props from selectable
       ...getOptionProps({
         id
@@ -395,7 +395,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       as: "ul",
       role: "group",
       renderLabel: renderLabel,
-      ...(0, _omitProps.omitProps)(rest, [..._v11_4.Options.allowedProps, ..._Group.Group.allowedProps]),
+      ...(0, _omitProps.omitProps)(rest, [..._v11_4.Options.allowedProps, ..._index.Group.allowedProps]),
       children: _react.Children.map(children, child => {
         return this.renderOption(child, {
           getOptionProps,
@@ -444,17 +444,17 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           elementRef: this.handleListRef
         }),
         children: isShowingOptions ? _react.Children.map(children, (child, index) => {
-          if (!child || !(0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group, _Option.Option])) {
+          if (!child || !(0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group, _index2.Option])) {
             return; // ignore invalid children
           }
-          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
+          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Option])) {
             lastWasGroup = false;
             return this.renderOption(child, {
               getOptionProps,
               getDisabledOptionProps
             });
           }
-          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
             const afterGroup = lastWasGroup;
             lastWasGroup = true;
             return this.renderGroup(child, {
@@ -487,7 +487,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   }
   renderContentBeforeOrAfterInput(position) {
     for (const child of this.childrenArray) {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
         // Group found
         const options = this.getGroupChildrenArray(child);
         for (const option of options) {

package/lib/Select/v2/Group/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Group = void 0;
 var _react = require("react");
-var _props = require("./props");
+var _props = require("./props.js");
 /*
  * The MIT License (MIT)
  *
@@ -38,7 +38,7 @@ id: Select.Group
 @module Group
 **/
 class Group extends _react.Component {
-  static displayName = "Group";
+  static displayName = 'Group';
   static componentId = 'Select.Group';
   static allowedProps = _props.allowedProps;
   static defaultProps = {};

package/lib/Select/v2/Option/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Option = void 0;
 var _react = require("react");
-var _props = require("./props");
+var _props = require("./props.js");
 /*
  * The MIT License (MIT)
  *
@@ -38,7 +38,7 @@ id: Select.Option
 @module Option
 **/
 class Option extends _react.Component {
-  static displayName = "Option";
+  static displayName = 'Option';
   static componentId = 'Select.Option';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/Select/v2/index.js

@@ -22,10 +22,10 @@ var _latest3 = require("@instructure/ui-text-input/latest");
 var _latest4 = require("@instructure/ui-options/latest");
 var _uiIcons = require("@instructure/ui-icons");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _Group = require("./Group");
-var _Option = require("./Option");
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _index = require("./Group/index.js");
+var _index2 = require("./Option/index.js");
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class;
 /*
@@ -90,7 +90,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
 let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
-  static displayName = "Select";
+  static displayName = 'Select';
   static componentId = 'Select';
   SCROLL_TOLERANCE = 0.5;
   static allowedProps = _props.allowedProps;
@@ -109,8 +109,8 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     scrollToHighlightedOption: true,
     isOptionContentAppliedToInput: false
   };
-  static Option = _Option.Option;
-  static Group = _Group.Group;
+  static Option = _index2.Option;
+  static Group = _index.Group;
   componentDidMount() {
     this.props.makeStyles?.();
   }
@@ -162,7 +162,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   get highlightedOptionId() {
     let highlightedOptionId;
     this.childrenArray.forEach(child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
         // group found
         this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
@@ -182,7 +182,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   get selectedOptionId() {
     const selectedOptionId = [];
     this.childrenArray.forEach(child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
         // group found
         this.getGroupChildrenArray(child).forEach(option => {
           // check options in group
@@ -336,7 +336,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     };
     let optionProps = {
       // passthrough props
-      ...(0, _omitProps.omitProps)(option.props, [..._Option.Option.allowedProps, ..._latest4.Options.Item.allowedProps]),
+      ...(0, _omitProps.omitProps)(option.props, [..._index2.Option.allowedProps, ..._latest4.Options.Item.allowedProps]),
       // props from selectable
       ...getOptionProps({
         id
@@ -398,7 +398,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       as: "ul",
       role: "group",
       renderLabel: renderLabel,
-      ...(0, _omitProps.omitProps)(rest, [..._latest4.Options.allowedProps, ..._Group.Group.allowedProps]),
+      ...(0, _omitProps.omitProps)(rest, [..._latest4.Options.allowedProps, ..._index.Group.allowedProps]),
       children: _react.Children.map(children, child => {
         return this.renderOption(child, {
           getOptionProps,
@@ -447,17 +447,17 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           elementRef: this.handleListRef
         }),
         children: isShowingOptions ? _react.Children.map(children, (child, index) => {
-          if (!child || !(0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group, _Option.Option])) {
+          if (!child || !(0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group, _index2.Option])) {
             return; // ignore invalid children
           }
-          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
+          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Option])) {
             lastWasGroup = false;
             return this.renderOption(child, {
               getOptionProps,
               getDisabledOptionProps
             });
           }
-          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
             const afterGroup = lastWasGroup;
             lastWasGroup = true;
             return this.renderGroup(child, {
@@ -494,7 +494,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   }
   renderContentBeforeOrAfterInput(position) {
     for (const child of this.childrenArray) {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.Group])) {
         // Group found
         const options = this.getGroupChildrenArray(child);
         for (const option of options) {

package/lib/exports/a.js

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function () {
-    return _v.Select;
+    return _index.Select;
   }
 });
 Object.defineProperty(exports, "SelectGroup", {
   enumerable: true,
   get: function () {
-    return _Group.Group;
+    return _index2.Group;
   }
 });
 Object.defineProperty(exports, "SelectOption", {
   enumerable: true,
   get: function () {
-    return _Option.Option;
+    return _index3.Option;
   }
 });
-var _v = require("../Select/v1");
-var _Group = require("../Select/v1/Group");
-var _Option = require("../Select/v1/Option");
+var _index = require("../Select/v1/index.js");
+var _index2 = require("../Select/v1/Group/index.js");
+var _index3 = require("../Select/v1/Option/index.js");

package/lib/exports/b.js

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function () {
-    return _v.Select;
+    return _index.Select;
   }
 });
 Object.defineProperty(exports, "SelectGroup", {
   enumerable: true,
   get: function () {
-    return _Group.Group;
+    return _index2.Group;
   }
 });
 Object.defineProperty(exports, "SelectOption", {
   enumerable: true,
   get: function () {
-    return _Option.Option;
+    return _index3.Option;
   }
 });
-var _v = require("../Select/v2");
-var _Group = require("../Select/v2/Group");
-var _Option = require("../Select/v2/Option");
+var _index = require("../Select/v2/index.js");
+var _index2 = require("../Select/v2/Group/index.js");
+var _index3 = require("../Select/v2/Option/index.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.4-snapshot-14",
+  "version": "11.7.4-snapshot-49",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,30 +15,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/emotion": "11.7.4-snapshot-14",
-    "@instructure/shared-types": "11.7.4-snapshot-14",
-    "@instructure/ui-form-field": "11.7.4-snapshot-14",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-icons": "11.7.4-snapshot-14",
-    "@instructure/ui-options": "11.7.4-snapshot-14",
-    "@instructure/ui-popover": "11.7.4-snapshot-14",
-    "@instructure/ui-position": "11.7.4-snapshot-14",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-text-input": "11.7.4-snapshot-14",
-    "@instructure/ui-selectable": "11.7.4-snapshot-14",
-    "@instructure/ui-themes": "11.7.4-snapshot-14",
-    "@instructure/ui-view": "11.7.4-snapshot-14",
-    "@instructure/uid": "11.7.4-snapshot-14",
-    "@instructure/ui-utils": "11.7.4-snapshot-14"
+    "@instructure/emotion": "11.7.4-snapshot-49",
+    "@instructure/shared-types": "11.7.4-snapshot-49",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-icons": "11.7.4-snapshot-49",
+    "@instructure/ui-form-field": "11.7.4-snapshot-49",
+    "@instructure/ui-options": "11.7.4-snapshot-49",
+    "@instructure/ui-position": "11.7.4-snapshot-49",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-text-input": "11.7.4-snapshot-49",
+    "@instructure/ui-themes": "11.7.4-snapshot-49",
+    "@instructure/ui-popover": "11.7.4-snapshot-49",
+    "@instructure/ui-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-view": "11.7.4-snapshot-49",
+    "@instructure/ui-selectable": "11.7.4-snapshot-49",
+    "@instructure/uid": "11.7.4-snapshot-49"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-14",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-scripts": "11.7.4-snapshot-14"
+    "@instructure/ui-color-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-49",
+    "@instructure/ui-scripts": "11.7.4-snapshot-49"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Select/v1/Group/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 import type { SelectGroupProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 
 /**
 ---
@@ -34,6 +34,7 @@ id: Select.Group
 @module Group
 **/
 class Group extends Component<SelectGroupProps> {
+  static displayName = 'Group'
   static readonly componentId = 'Select.Group'
 
   static allowedProps = allowedProps

package/src/Select/v1/Option/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 import type { SelectOptionProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 
 /**
 ---
@@ -34,6 +34,7 @@ id: Select.Option
 @module Option
 **/
 class Option extends Component<SelectOptionProps> {
+  static displayName = 'Option'
   static readonly componentId = 'Select.Option'
 
   static allowedProps = allowedProps

package/src/Select/v1/index.tsx

@@ -61,16 +61,16 @@ import type {
 
 import { withStyle, BorderWidth } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { Group } from './Group'
+import { Group } from './Group/index.js'
 import type { SelectGroupProps } from './Group/props'
-import { Option } from './Option'
+import { Option } from './Option/index.js'
 import type { SelectOptionProps, RenderSelectOptionLabel } from './Option/props'
 
 import type { SelectProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import { Renderable } from '@instructure/shared-types'
 
 type GroupChild = ComponentElement<SelectGroupProps, Group>
@@ -131,6 +131,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 class Select extends Component<SelectProps> {
+  static displayName = 'Select'
   static readonly componentId = 'Select'
   private readonly SCROLL_TOLERANCE = 0.5
 

package/src/Select/v2/Group/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 import type { SelectGroupProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 
 /**
 ---
@@ -34,6 +34,7 @@ id: Select.Group
 @module Group
 **/
 class Group extends Component<SelectGroupProps> {
+  static displayName = 'Group'
   static readonly componentId = 'Select.Group'
 
   static allowedProps = allowedProps