@instructure/ui-number-input 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-number-input
+
+### 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/NumberInput/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _NumberInput, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,72 +40,31 @@ category: components
 id: NumberInput
 ---
 **/
-let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_NumberInput = class NumberInput extends Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      hasFocus: false
-    };
-    this.ref = null;
-    this._input = null;
-    this._id = void 0;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.handleInputRef = element => {
-      this._input = element;
-      if (typeof this.props.inputRef === 'function') {
-        this.props.inputRef(element);
-      }
-    };
-    this.handleFocus = event => {
-      this.setState({
-        hasFocus: true
-      });
-      if (typeof this.props.onFocus === 'function') {
-        this.props.onFocus(event);
-      }
-    };
-    this.handleBlur = event => {
-      this.setState({
-        hasFocus: false
-      });
-      if (typeof this.props.onBlur === 'function') {
-        this.props.onBlur(event);
-      }
-    };
-    this.handleChange = event => {
-      if (typeof this.props.onChange === 'function') {
-        this.props.onChange(event, event.target.value);
-      }
-    };
-    this.handleKeyDown = event => {
-      const _this$props = this.props,
-        onKeyDown = _this$props.onKeyDown,
-        onDecrement = _this$props.onDecrement,
-        onIncrement = _this$props.onIncrement;
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event);
-      }
-      if (event.keyCode === keycode.codes.down) {
-        event.preventDefault();
-        if (typeof onDecrement === 'function') {
-          onDecrement(event);
-        }
-      } else if (event.keyCode === keycode.codes.up) {
-        event.preventDefault();
-        if (typeof onIncrement === 'function') {
-          onIncrement(event);
-        }
-      }
-    };
-    this.handleClickUpArrow = event => {
-      this.arrowClicked(event, this.props.onIncrement);
-    };
-    this.handleClickDownArrow = event => {
-      this.arrowClicked(event, this.props.onDecrement);
-    };
-  }
+let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class NumberInput extends Component {
+  static displayName = "NumberInput";
+  static componentId = 'NumberInput';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
+    messages: [],
+    isRequired: false,
+    showArrows: true,
+    size: 'medium',
+    display: 'block',
+    textAlign: 'start',
+    inputMode: 'numeric',
+    allowStringValue: false
+  };
+  state = {
+    hasFocus: false
+  };
+  ref = null;
+  _input = null;
+  _id;
+  handleRef = el => {
+    this.ref = el;
+  };
   get id() {
     if (this.props.id) {
       return this.props.id;
@@ -124,12 +83,10 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
     });
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleVariables);
+    this.props.makeStyles?.(this.makeStyleVariables);
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleVariables);
+    this.props.makeStyles?.(this.makeStyleVariables);
   }
   get makeStyleVariables() {
     return {
@@ -138,57 +95,113 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       invalid: this.invalid
     };
   }
+  handleInputRef = element => {
+    this._input = element;
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(element);
+    }
+  };
+  handleFocus = event => {
+    this.setState({
+      hasFocus: true
+    });
+    if (typeof this.props.onFocus === 'function') {
+      this.props.onFocus(event);
+    }
+  };
+  handleBlur = event => {
+    this.setState({
+      hasFocus: false
+    });
+    if (typeof this.props.onBlur === 'function') {
+      this.props.onBlur(event);
+    }
+  };
+  handleChange = event => {
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(event, event.target.value);
+    }
+  };
+  handleKeyDown = event => {
+    const {
+      onKeyDown,
+      onDecrement,
+      onIncrement
+    } = this.props;
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+    if (event.keyCode === keycode.codes.down) {
+      event.preventDefault();
+      if (typeof onDecrement === 'function') {
+        onDecrement(event);
+      }
+    } else if (event.keyCode === keycode.codes.up) {
+      event.preventDefault();
+      if (typeof onIncrement === 'function') {
+        onIncrement(event);
+      }
+    }
+  };
+  handleClickUpArrow = event => {
+    this.arrowClicked(event, this.props.onIncrement);
+  };
+  handleClickDownArrow = event => {
+    this.arrowClicked(event, this.props.onDecrement);
+  };
   arrowClicked(event, callback) {
-    const interaction = this.interaction;
+    const {
+      interaction
+    } = this;
     event.preventDefault();
     if (interaction === 'enabled') {
-      var _this$_input;
-      (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
+      this._input?.focus();
       if (typeof callback === 'function') {
         callback(event);
       }
     }
   }
   renderArrows(customIcons) {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
     return _jsxs("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.arrowContainer,
+      css: this.props.styles?.arrowContainer,
       children: [_jsx("button", {
         "aria-hidden": true,
-        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.arrow,
+        css: this.props.styles?.arrow,
         onMouseDown: this.handleClickUpArrow,
         tabIndex: -1,
         type: "button",
-        children: customIcons !== null && customIcons !== void 0 && customIcons.increase ? callRenderProp(customIcons.increase) : _IconArrowOpenUpLine || (_IconArrowOpenUpLine = _jsx(IconArrowOpenUpLine, {}))
+        children: customIcons?.increase ? callRenderProp(customIcons.increase) : _jsx(IconArrowOpenUpLine, {})
       }), _jsx("button", {
         "aria-hidden": true,
-        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.arrow,
+        css: this.props.styles?.arrow,
         onMouseDown: this.handleClickDownArrow,
         tabIndex: -1,
         type: "button",
-        children: customIcons !== null && customIcons !== void 0 && customIcons.decrease ? callRenderProp(customIcons.decrease) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = _jsx(IconArrowOpenDownLine, {}))
+        children: customIcons?.decrease ? callRenderProp(customIcons.decrease) : _jsx(IconArrowOpenDownLine, {})
       })]
     });
   }
   render() {
-    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
-    const _this$props4 = this.props,
-      renderLabel = _this$props4.renderLabel,
-      display = _this$props4.display,
-      placeholder = _this$props4.placeholder,
-      isRequired = _this$props4.isRequired,
-      showArrows = _this$props4.showArrows,
-      value = _this$props4.value,
-      width = _this$props4.width,
-      styles = _this$props4.styles,
-      allowStringValue = _this$props4.allowStringValue,
-      renderIcons = _this$props4.renderIcons,
-      margin = _this$props4.margin;
-    const interaction = this.interaction;
+    const {
+      renderLabel,
+      display,
+      placeholder,
+      isRequired,
+      showArrows,
+      value,
+      width,
+      styles,
+      allowStringValue,
+      renderIcons,
+      margin
+    } = this.props;
+    const {
+      interaction
+    } = this;
     const rawLabel = callRenderProp(renderLabel);
     const label = hasVisibleChildren(rawLabel) ? _jsxs(Fragment, {
       children: [rawLabel, isRequired && _jsxs("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+        css: this.invalid ? styles?.requiredInvalid : {},
         "aria-hidden": true,
         children: [' ', "*"]
       })]
@@ -202,16 +215,16 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       margin: margin,
       "data-cid": "NumberInput",
       children: _jsx("span", {
-        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
+        css: this.props.styles?.inputWidth,
         style: width ? {
           width
-        } : void 0,
+        } : undefined,
         children: _jsxs("span", {
-          css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.inputContainer,
+          css: this.props.styles?.inputContainer,
           children: [_jsx("input", {
             ...omitProps(this.props, [...FormField.allowedProps, ...NumberInput.allowedProps]),
-            css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
-            "aria-invalid": this.invalid ? 'true' : void 0,
+            css: this.props.styles?.input,
+            "aria-invalid": this.invalid ? 'true' : undefined,
             id: this.id,
             type: allowStringValue ? 'text' : 'number',
             inputMode: this.props.inputMode,
@@ -230,17 +243,6 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       })
     });
   }
-}, _NumberInput.displayName = "NumberInput", _NumberInput.componentId = 'NumberInput', _NumberInput.allowedProps = allowedProps, _NumberInput.defaultProps = {
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  messages: [],
-  isRequired: false,
-  showArrows: true,
-  size: 'medium',
-  display: 'block',
-  textAlign: 'start',
-  inputMode: 'numeric',
-  allowStringValue: false
-}, _NumberInput)) || _class) || _class);
+}) || _class) || _class);
 export default NumberInput;
 export { NumberInput };

package/es/NumberInput/v1/styles.js

@@ -33,11 +33,15 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const size = props.size,
-    textAlign = props.textAlign;
-  const interaction = state.interaction,
-    hasFocus = state.hasFocus,
-    invalid = state.invalid;
+  const {
+    size,
+    textAlign
+  } = props;
+  const {
+    interaction,
+    hasFocus,
+    invalid
+  } = state;
   const disabledStyles = interaction === 'disabled' ? {
     cursor: 'not-allowed',
     pointerEvents: 'none',

package/es/NumberInput/v1/theme.js

@@ -28,13 +28,14 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11;
-  const colors = theme.colors,
-    spacing = theme.spacing,
-    borders = theme.borders,
-    typography = theme.typography,
-    forms = theme.forms,
-    themeName = theme.key;
+  const {
+    colors,
+    spacing,
+    borders,
+    typography,
+    forms,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -43,32 +44,32 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
-    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
-    padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
+    borderColor: colors?.contrasts?.grey3045,
+    borderRadius: borders?.radiusMedium,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
+    requiredInvalidColor: colors?.contrasts?.red5782,
+    padding: `0 ${spacing?.small}`,
     arrowsContainerWidth: '2rem',
-    arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
-    arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1111,
-    arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
-    arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey3045,
-    arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey1214}`,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue4570,
-    errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.red4570,
-    errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
-    placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey4570,
-    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
-    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
+    arrowsColor: colors?.contrasts?.grey125125,
+    arrowsBackgroundColor: colors?.contrasts?.grey1111,
+    arrowsHoverBackgroundColor: colors?.contrasts?.grey1214,
+    arrowsBorderColor: colors?.contrasts?.grey3045,
+    arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors?.contrasts?.grey1214}`,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineStyle: borders?.style,
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    errorBorderColor: colors?.contrasts?.red4570,
+    errorOutlineColor: colors?.contrasts?.red4570,
+    placeholderColor: colors?.contrasts?.grey4570,
+    mediumFontSize: typography?.fontSizeMedium,
+    mediumHeight: forms?.inputHeightMedium,
+    largeFontSize: typography?.fontSizeLarge,
+    largeHeight: forms?.inputHeightLarge
   };
   return {
     ...componentVariables,

package/es/NumberInput/v2/index.js

@@ -1,6 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["messages", "isRequired", "showArrows", "size", "display", "textAlign", "inputMode", "allowStringValue", "renderLabel", "placeholder", "value", "width", "renderIcons", "margin", "inputRef", "onFocus", "onBlur", "onChange", "onKeyDown", "onDecrement", "onIncrement", "id", "themeOverride"];
 /*
  * The MIT License (MIT)
  *
@@ -40,58 +37,42 @@ id: NumberInput
 ---
 **/
 const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
-  var _ChevronUpInstUIIcon, _ChevronDownInstUIIco;
-  const _props$messages = props.messages,
-    messages = _props$messages === void 0 ? [] : _props$messages,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$showArrows = props.showArrows,
-    showArrows = _props$showArrows === void 0 ? true : _props$showArrows,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    _props$display = props.display,
-    display = _props$display === void 0 ? 'block' : _props$display,
-    _props$textAlign = props.textAlign,
-    textAlign = _props$textAlign === void 0 ? 'start' : _props$textAlign,
-    _props$inputMode = props.inputMode,
-    inputMode = _props$inputMode === void 0 ? 'numeric' : _props$inputMode,
-    _props$allowStringVal = props.allowStringValue,
-    allowStringValue = _props$allowStringVal === void 0 ? false : _props$allowStringVal,
-    renderLabel = props.renderLabel,
-    placeholder = props.placeholder,
-    value = props.value,
-    width = props.width,
-    renderIcons = props.renderIcons,
-    margin = props.margin,
-    inputRefProp = props.inputRef,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onChange = props.onChange,
-    onKeyDown = props.onKeyDown,
-    onDecrement = props.onDecrement,
-    onIncrement = props.onIncrement,
-    idProp = props.id,
-    themeOverride = props.themeOverride,
-    rest = _objectWithoutProperties(props, _excluded);
+  const {
+    messages = [],
+    isRequired = false,
+    showArrows = true,
+    size = 'medium',
+    display = 'block',
+    textAlign = 'start',
+    inputMode = 'numeric',
+    allowStringValue = false,
+    renderLabel,
+    placeholder,
+    value,
+    width,
+    renderIcons,
+    margin,
+    inputRef: inputRefProp,
+    onFocus,
+    onBlur,
+    onChange,
+    onKeyDown,
+    onDecrement,
+    onIncrement,
+    id: idProp,
+    themeOverride,
+    ...rest
+  } = props;
   // these are icon tokens
 
-  const _useState = useState('actionSecondaryBaseColor'),
-    _useState2 = _slicedToArray(_useState, 2),
-    upButtonState = _useState2[0],
-    setUpButtonState = _useState2[1];
-  const _useState3 = useState('actionSecondaryBaseColor'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    downButtonState = _useState4[0],
-    setDownButtonState = _useState4[1];
+  const [upButtonState, setUpButtonState] = useState('actionSecondaryBaseColor');
+  const [downButtonState, setDownButtonState] = useState('actionSecondaryBaseColor');
   // Refs
   const containerRef = useRef(null);
   const inputRef = useRef(null);
 
   // Deterministic ID generation
-  const _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    deterministicId = _useState6[0],
-    setDeterministicId = _useState6[1];
+  const [deterministicId, setDeterministicId] = useState();
   const getId = useDeterministicId('NumberInput');
   useEffect(() => {
     setDeterministicId(getId());
@@ -172,8 +153,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   const arrowClicked = useCallback((event, callback) => {
     event.preventDefault();
     if (interaction === 'enabled') {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      inputRef.current?.focus();
       if (typeof callback === 'function') {
         callback(event);
       }
@@ -191,8 +171,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   // Expose imperative API via ref
   useImperativeHandle(ref, () => ({
     focus: () => {
-      var _inputRef$current2;
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      inputRef.current?.focus();
     },
     get id() {
       return id;
@@ -204,8 +183,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
       return interaction;
     },
     get value() {
-      var _inputRef$current3;
-      return (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value;
+      return inputRef.current?.value;
     },
     ref: containerRef
   }), [id, invalid, interaction]);
@@ -213,31 +191,31 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   // Render methods
   const renderArrows = customIcons => {
     return _jsxs("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.arrowContainer,
+      css: styles?.arrowContainer,
       children: [_jsx("button", {
         "aria-hidden": true,
-        css: styles === null || styles === void 0 ? void 0 : styles.arrow,
+        css: styles?.arrow,
         onMouseDown: handleClickUpArrow,
         onMouseOver: () => setUpButtonState('actionSecondaryHoverColor'),
         onMouseOut: () => setUpButtonState('actionSecondaryBaseColor'),
         tabIndex: -1,
         type: "button",
-        children: customIcons !== null && customIcons !== void 0 && customIcons.increase ? callRenderProp(customIcons.increase) : _ChevronUpInstUIIcon || (_ChevronUpInstUIIcon = _jsx(ChevronUpInstUIIcon, {
+        children: customIcons?.increase ? callRenderProp(customIcons.increase) : _jsx(ChevronUpInstUIIcon, {
           size: "sm",
           color: upButtonState
-        }))
+        })
       }), _jsx("button", {
         "aria-hidden": true,
-        css: styles === null || styles === void 0 ? void 0 : styles.arrow,
+        css: styles?.arrow,
         onMouseDown: handleClickDownArrow,
         onMouseOver: () => setDownButtonState('actionSecondaryHoverColor'),
         onMouseOut: () => setDownButtonState('actionSecondaryBaseColor'),
         tabIndex: -1,
         type: "button",
-        children: customIcons !== null && customIcons !== void 0 && customIcons.decrease ? callRenderProp(customIcons.decrease) : _ChevronDownInstUIIco || (_ChevronDownInstUIIco = _jsx(ChevronDownInstUIIcon, {
+        children: customIcons?.decrease ? callRenderProp(customIcons.decrease) : _jsx(ChevronDownInstUIIcon, {
           size: "sm",
           color: downButtonState
-        }))
+        })
       })]
     });
   };
@@ -260,20 +238,20 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     readOnly: interaction === 'readonly',
     "data-cid": "NumberInput",
     children: _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.inputWidth,
+      css: styles?.inputWidth,
       style: width ? {
         width
-      } : void 0,
+      } : undefined,
       children: _jsxs("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.inputContainer,
+        css: styles?.inputContainer,
         children: [_jsx("input", {
           ...passedProps,
-          css: styles === null || styles === void 0 ? void 0 : styles.input,
-          "aria-invalid": invalid ? 'true' : void 0,
+          css: styles?.input,
+          "aria-invalid": invalid ? 'true' : undefined,
           id: id,
           type: allowStringValue ? 'text' : 'number',
           inputMode: inputMode,
-          placeholder: interaction === 'enabled' ? placeholder : void 0,
+          placeholder: interaction === 'enabled' ? placeholder : undefined,
           ref: handleInputRef,
           required: isRequired,
           value: value,

package/es/NumberInput/v2/styles.js

@@ -34,11 +34,13 @@ import { calcFocusOutlineStyles } from '@instructure/emotion';
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, params, sharedTokens) => {
-  const size = params.size,
-    textAlign = params.textAlign,
-    interaction = params.interaction,
-    success = params.success,
-    invalid = params.invalid;
+  const {
+    size,
+    textAlign,
+    interaction,
+    success,
+    invalid
+  } = params;
   const containerInteractionStates = {
     ...(interaction === 'enabled' && {
       backgroundColor: componentTheme.backgroundColor,