@instructure/ui-select 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-select
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

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

@@ -32,6 +32,11 @@ id: Select.Group
 @module Group
 **/
 class Group extends Component {
+  static displayName = "Group";
+  static componentId = 'Select.Group';
+  static allowedProps = allowedProps;
+  static defaultProps = {};
+
   /* istanbul ignore next */
   render() {
     // this component is only used for prop validation. Select.Group children
@@ -39,9 +44,5 @@ class Group extends Component {
     return null;
   }
 }
-Group.displayName = "Group";
-Group.componentId = 'Select.Group';
-Group.allowedProps = allowedProps;
-Group.defaultProps = {};
 export default Group;
 export { Group };

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

@@ -32,6 +32,15 @@ id: Select.Option
 @module Option
 **/
 class Option extends Component {
+  static displayName = "Option";
+  static componentId = 'Select.Option';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    isHighlighted: false,
+    isSelected: false,
+    isDisabled: false
+  };
+
   /* istanbul ignore next */
   render() {
     // this component is only used for prop validation. Select.Option children
@@ -39,13 +48,5 @@ class Option extends Component {
     return null;
   }
 }
-Option.displayName = "Option";
-Option.componentId = 'Select.Option';
-Option.allowedProps = allowedProps;
-Option.defaultProps = {
-  isHighlighted: false,
-  isSelected: false,
-  isDisabled: false
-};
 export default Option;
 export { Option };

package/es/Select/v1/index.js

@@ -1,8 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "renderLabel", "children"],
-  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions", "layout"],
-  _excluded3 = ["ref"];
-var _dec, _dec2, _class, _Select, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -50,8 +46,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 // because the Select component is re-rendered on every prop change of the <Select.Option>
 // and with a large amount of options, this can cause a lot of unnecessary re-renders.
 const MemoedOption = /*#__PURE__*/memo(function Opt(props) {
-  const optionsItemProps = props.optionsItemProps,
-    children = props.children;
+  const {
+    optionsItemProps,
+    children
+  } = props;
   return (
     // The main <Options> that renders this is always an "ul"
     _jsx(Options.Item, {
@@ -76,58 +74,50 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Select = class Select extends Component {
-  constructor(...args) {
-    super(...args);
-    this.SCROLL_TOLERANCE = 0.5;
-    this.state = {
-      hasInputRef: false
-    };
-    this.ref = null;
-    this._input = null;
-    this._defaultId = this.props.deterministicId();
-    this._inputContainer = null;
-    this._listView = null;
-    // temporarily stores actionable options
-    this._optionIds = [];
-    // best guess for first calculation of list height
-    this._optionHeight = 36;
-    this.handleInputRef = node => {
-      var _this$props$inputRef, _this$props;
-      // ensures list is positioned with respect to input if list is open on mount
-      if (!this.state.hasInputRef) {
-        this.setState({
-          hasInputRef: true
-        });
-      }
-      this._input = node;
-      (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
-    };
-    this.handleListRef = node => {
-      var _this$props$listRef, _this$props2;
-      (_this$props$listRef = (_this$props2 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props2, node);
-
-      // store option height to calculate list maxHeight
-      if (node && node.querySelector('[role="option"]')) {
-        this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
-      }
-    };
-    this.handleInputContainerRef = node => {
-      this._inputContainer = node;
-    };
-  }
+let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Select extends Component {
+  static displayName = "Select";
+  static componentId = 'Select';
+  SCROLL_TOLERANCE = 0.5;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    inputValue: '',
+    isShowingOptions: false,
+    size: 'medium',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    shouldNotWrap: false,
+    scrollToHighlightedOption: true,
+    isOptionContentAppliedToInput: false
+  };
+  static Option = Option;
+  static Group = Group;
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    this.props.makeStyles?.();
     if (this.props.scrollToHighlightedOption) {
       // scroll option into view if needed
       requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
     }
   }
+  state = {
+    hasInputRef: false
+  };
+  ref = null;
+  _input = null;
+  _defaultId = this.props.deterministicId();
+  _inputContainer = null;
+  _listView = null;
+  // temporarily stores actionable options
+  _optionIds = [];
+  // best guess for first calculation of list height
+  _optionHeight = 36;
   focus() {
     this._input && this._input.focus();
   }
@@ -147,7 +137,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     return this.props.id || this._defaultId;
   }
   get width() {
-    return this._inputContainer ? this._inputContainer.offsetWidth : void 0;
+    return this._inputContainer ? this._inputContainer.offsetWidth : undefined;
   }
   get interaction() {
     return getInteraction({
@@ -196,10 +186,31 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       return selectedOptionId[0];
     }
     if (selectedOptionId.length === 0) {
-      return void 0;
+      return undefined;
     }
     return selectedOptionId;
   }
+  handleInputRef = node => {
+    // ensures list is positioned with respect to input if list is open on mount
+    if (!this.state.hasInputRef) {
+      this.setState({
+        hasInputRef: true
+      });
+    }
+    this._input = node;
+    this.props.inputRef?.(node);
+  };
+  handleListRef = node => {
+    this.props.listRef?.(node);
+
+    // store option height to calculate list maxHeight
+    if (node && node.querySelector('[role="option"]')) {
+      this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
+    }
+  };
+  handleInputContainerRef = node => {
+    this._inputContainer = node;
+  };
   scrollToOption(id) {
     if (!this._listView || !id) return;
     const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`);
@@ -216,22 +227,25 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     }
   }
   highlightOption(event, id) {
-    const onRequestHighlightOption = this.props.onRequestHighlightOption;
+    const {
+      onRequestHighlightOption
+    } = this.props;
     if (id) {
-      onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
+      onRequestHighlightOption?.(event, {
         id
       });
     }
   }
   getEventHandlers() {
-    const _this$props5 = this.props,
-      isShowingOptions = _this$props5.isShowingOptions,
-      onRequestShowOptions = _this$props5.onRequestShowOptions,
-      onRequestHideOptions = _this$props5.onRequestHideOptions,
-      onRequestSelectOption = _this$props5.onRequestSelectOption;
+    const {
+      isShowingOptions,
+      onRequestShowOptions,
+      onRequestHideOptions,
+      onRequestSelectOption
+    } = this.props;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
-        onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
+        onRequestShowOptions?.(event);
         const selectedOptionId = this.selectedOptionId;
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
@@ -239,7 +253,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
         }
       },
       onRequestHideOptions: event => {
-        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
+        onRequestHideOptions?.(event);
       },
       onRequestHighlightOption: (event, {
         id,
@@ -248,7 +262,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
         if (!isShowingOptions) return;
         const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
-        let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
+        let highlightId = this._optionIds.indexOf(id) > -1 ? id : undefined;
         if (!highlightId) {
           if (!highlightedOptionId) {
             // nothing highlighted yet, highlight first option
@@ -256,7 +270,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
           } else {
             // find next id based on direction
             const index = this._optionIds.indexOf(highlightedOptionId);
-            highlightId = index > -1 ? this._optionIds[index + direction] : void 0;
+            highlightId = index > -1 ? this._optionIds[index + direction] : undefined;
           }
         }
         if (highlightId) {
@@ -275,7 +289,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       }) => {
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
-          onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
+          onRequestSelectOption?.(event, {
             id
           });
         }
@@ -283,19 +297,21 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     } : {};
   }
   renderOption(option, data) {
-    const getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    const _option$props = option.props,
-      id = _option$props.id,
-      isDisabled = _option$props.isDisabled,
-      isHighlighted = _option$props.isHighlighted,
-      isSelected = _option$props.isSelected,
-      renderBeforeLabel = _option$props.renderBeforeLabel,
-      renderAfterLabel = _option$props.renderAfterLabel,
-      children = _option$props.children;
+    const {
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      id,
+      isDisabled,
+      isHighlighted,
+      isSelected,
+      renderBeforeLabel,
+      renderAfterLabel,
+      children
+    } = option.props;
     const getRenderOptionLabel = renderOptionLabel => {
-      var _renderOptionLabel$pr;
-      return typeof renderOptionLabel === 'function' && !(renderOptionLabel !== null && renderOptionLabel !== void 0 && (_renderOptionLabel$pr = renderOptionLabel.prototype) !== null && _renderOptionLabel$pr !== void 0 && _renderOptionLabel$pr.isReactComponent) ? renderOptionLabel.bind(null, {
+      return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? renderOptionLabel.bind(null, {
         id,
         isDisabled,
         isSelected,
@@ -342,20 +358,23 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     });
   }
   renderGroup(group, data) {
-    const getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps,
-      isFirstChild = data.isFirstChild,
-      isLastChild = data.isLastChild,
-      afterGroup = data.afterGroup;
-    const _group$props = group.props,
-      id = _group$props.id,
-      renderLabel = _group$props.renderLabel,
-      children = _group$props.children,
-      rest = _objectWithoutProperties(_group$props, _excluded);
+    const {
+      getOptionProps,
+      getDisabledOptionProps,
+      isFirstChild,
+      isLastChild,
+      afterGroup
+    } = data;
+    const {
+      id,
+      renderLabel,
+      children,
+      ...rest
+    } = group.props;
     const groupChildren = [];
     // add a separator above
     if (!isFirstChild && !afterGroup) {
-      groupChildren.push(_Options$Separator || (_Options$Separator = _jsx(Options.Separator, {})));
+      groupChildren.push(_jsx(Options.Separator, {}));
     }
     // create a sublist as a group
     // a wrapping listitem will be created by Options
@@ -374,20 +393,23 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     }));
     // add a separator below
     if (!isLastChild) {
-      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = _jsx(Options.Separator, {})));
+      groupChildren.push(_jsx(Options.Separator, {}));
     }
     return groupChildren;
   }
   renderList(data) {
-    const getListProps = data.getListProps,
-      getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    const _this$props6 = this.props,
-      isShowingOptions = _this$props6.isShowingOptions,
-      optionsMaxWidth = _this$props6.optionsMaxWidth,
-      optionsMaxHeight = _this$props6.optionsMaxHeight,
-      visibleOptionsCount = _this$props6.visibleOptionsCount,
-      children = _this$props6.children;
+    const {
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      isShowingOptions,
+      optionsMaxWidth,
+      optionsMaxHeight,
+      visibleOptionsCount,
+      children
+    } = this.props;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       display: 'block',
@@ -438,16 +460,17 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     });
   }
   renderIcon() {
-    const _this$props7 = this.props,
-      styles = _this$props7.styles,
-      isShowingOptions = _this$props7.isShowingOptions;
+    const {
+      styles,
+      isShowingOptions
+    } = this.props;
     return _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.icon,
-      children: isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = _jsx(IconArrowOpenUpLine, {
+      css: styles?.icon,
+      children: isShowingOptions ? _jsx(IconArrowOpenUpLine, {
         inline: false
-      })) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = _jsx(IconArrowOpenDownLine, {
+      }) : _jsx(IconArrowOpenDownLine, {
         inline: false
-      }))
+      })
     });
   }
   renderContentBeforeOrAfterInput(position) {
@@ -493,50 +516,58 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     return defaultReturn;
   }
   handleRenderBeforeInput() {
-    const _this$props8 = this.props,
-      renderBeforeInput = _this$props8.renderBeforeInput,
-      inputValue = _this$props8.inputValue,
-      isOptionContentAppliedToInput = _this$props8.isOptionContentAppliedToInput;
+    const {
+      renderBeforeInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
     );
   }
   handleRenderAfterInput() {
-    const _this$props9 = this.props,
-      renderAfterInput = _this$props9.renderAfterInput,
-      inputValue = _this$props9.inputValue,
-      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    const {
+      renderAfterInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
     );
   }
   renderInput(data) {
-    const getInputProps = data.getInputProps,
-      getTriggerProps = data.getTriggerProps;
-    const _this$props0 = this.props,
-      renderLabel = _this$props0.renderLabel,
-      inputValue = _this$props0.inputValue,
-      placeholder = _this$props0.placeholder,
-      isRequired = _this$props0.isRequired,
-      shouldNotWrap = _this$props0.shouldNotWrap,
-      size = _this$props0.size,
-      isInline = _this$props0.isInline,
-      width = _this$props0.width,
-      htmlSize = _this$props0.htmlSize,
-      messages = _this$props0.messages,
-      renderBeforeInput = _this$props0.renderBeforeInput,
-      renderAfterInput = _this$props0.renderAfterInput,
-      onFocus = _this$props0.onFocus,
-      onBlur = _this$props0.onBlur,
-      onInputChange = _this$props0.onInputChange,
-      onRequestHideOptions = _this$props0.onRequestHideOptions,
-      layout = _this$props0.layout,
-      rest = _objectWithoutProperties(_this$props0, _excluded2);
-    const interaction = this.interaction;
+    const {
+      getInputProps,
+      getTriggerProps
+    } = data;
+    const {
+      renderLabel,
+      inputValue,
+      placeholder,
+      isRequired,
+      shouldNotWrap,
+      size,
+      isInline,
+      width,
+      htmlSize,
+      messages,
+      renderBeforeInput,
+      renderAfterInput,
+      onFocus,
+      onBlur,
+      onInputChange,
+      onRequestHideOptions,
+      layout,
+      ...rest
+    } = this.props;
+    const {
+      interaction
+    } = this;
     const passthroughProps = omitProps(rest, Select.allowedProps);
-    const _getTriggerProps = getTriggerProps({
-        ...passthroughProps
-      }),
-      ref = _getTriggerProps.ref,
-      triggerProps = _objectWithoutProperties(_getTriggerProps, _excluded3);
+    const {
+      ref,
+      ...triggerProps
+    } = getTriggerProps({
+      ...passthroughProps
+    });
     const isEditable = typeof onInputChange !== 'undefined';
 
     // props to ensure screen readers treat uneditable selects as accessible
@@ -551,7 +582,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
       role: utils.isSafari() || utils.isAndroidOrIOS() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
       title: inputValue,
-      'aria-autocomplete': void 0,
+      'aria-autocomplete': undefined,
       'aria-readonly': true
     } : interaction === 'disabled' && utils.isChromium() ? {
       role: 'button'
@@ -582,14 +613,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button
       // the listbox closes on a swipe, so a DOM change is enforced by the key change
       // that seems to inform VoiceOver to behave the correct way
-      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== void 0 ? _jsx("span", {
+      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== undefined ? _jsx("span", {
         children: this.handleRenderAfterInput()
       }, this.props.isShowingOptions ? 'open' : 'closed') : this.handleRenderAfterInput(),
       // If `inputValue` is provided, we need to pass a default onChange handler,
       // because TextInput `value` is a controlled prop,
       // and onChange is not required for Select
       // (before it was handled by TextInput's defaultProp)
-      onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? () => {} : void 0,
+      onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? () => {} : undefined,
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
       ...overrideProps
@@ -602,13 +633,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     });
   }
   render() {
-    const _this$props1 = this.props,
-      constrain = _this$props1.constrain,
-      placement = _this$props1.placement,
-      mountNode = _this$props1.mountNode,
-      assistiveText = _this$props1.assistiveText,
-      isShowingOptions = _this$props1.isShowingOptions,
-      styles = _this$props1.styles;
+    const {
+      constrain,
+      placement,
+      mountNode,
+      assistiveText,
+      isShowingOptions,
+      styles
+    } = this.props;
     // clear temporary option store
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -628,7 +660,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
         getDescriptionProps
       }) => _jsxs("span", {
         ...getRootProps({
-          css: styles === null || styles === void 0 ? void 0 : styles.select
+          css: styles?.select
         }),
         ref: el => {
           this.ref = el;
@@ -639,7 +671,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
           getTriggerProps
         }), _jsx("span", {
           ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
+          css: styles?.assistiveText,
           children: assistiveText
         }), _jsx(Popover, {
           constrain: constrain,
@@ -648,12 +680,12 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
           // in order to be able to navigate through the list items with a swipe.
           // The swipe would result in closing the listbox if mounted elsewhere.
           ,
-          mountNode: mountNode !== void 0 ? mountNode : utils.isAndroidOrIOS() ? this.ref : void 0,
+          mountNode: mountNode !== undefined ? mountNode : utils.isAndroidOrIOS() ? this.ref : undefined,
           positionTarget: this._inputContainer,
           isShowingContent: isShowingOptions,
           shouldReturnFocus: false,
           withArrow: false,
-          borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth,
+          borderWidth: styles?.popoverBorderWidth,
           children: this.renderList({
             getListProps,
             getOptionProps,
@@ -663,20 +695,6 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       })
     });
   }
-}, _Select.displayName = "Select", _Select.componentId = 'Select', _Select.allowedProps = allowedProps, _Select.defaultProps = {
-  inputValue: '',
-  isShowingOptions: false,
-  size: 'medium',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  isRequired: false,
-  isInline: false,
-  visibleOptionsCount: 8,
-  placement: 'bottom stretch',
-  constrain: 'window',
-  shouldNotWrap: false,
-  scrollToHighlightedOption: true,
-  isOptionContentAppliedToInput: false
-}, _Select.Option = Option, _Select.Group = Group, _Select)) || _class) || _class);
+}) || _class) || _class);
 export default Select;
 export { Select };

package/es/Select/v1/styles.js

@@ -30,7 +30,9 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size;
+  const {
+    size
+  } = props;
   const iconSizeVariants = {
     small: {
       fontSize: componentTheme.smallIconSize

package/es/Select/v1/theme.js

@@ -28,18 +28,19 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2;
-  const colors = theme.colors,
-    typography = theme.typography;
+  const {
+    colors,
+    typography
+  } = theme;
   const componentVariables = {
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    smallIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
-    mediumIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    largeIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
+    fontSize: typography?.fontSizeMedium,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    smallIconSize: typography?.fontSizeXSmall,
+    mediumIconSize: typography?.fontSizeSmall,
+    largeIconSize: typography?.fontSizeMedium,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
     popoverBorderWidth: 'small'
   };
   return {