@instructure/ui-number-input 11.6.0 → 11.6.1-snapshot-129

package/es/NumberInput/v2/index.js

@@ -0,0 +1,292 @@
+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)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useState, useRef, useCallback, useImperativeHandle, forwardRef, useEffect } from 'react';
+import keycode from 'keycode';
+import { FormField } from '@instructure/ui-form-field/latest';
+import { ChevronUpInstUIIcon, ChevronDownInstUIIcon } from '@instructure/ui-icons';
+import { pickProps, callRenderProp, getInteraction, useDeterministicId, passthroughProps } from '@instructure/ui-react-utils';
+import { useStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+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);
+  // 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];
+  // 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 getId = useDeterministicId('NumberInput');
+  useEffect(() => {
+    setDeterministicId(getId());
+  }, []); // Empty deps array - only run once on mount
+  const id = idProp || deterministicId;
+
+  // Computed values
+  const invalid = !!messages && messages.some(message => message.type === 'error' || message.type === 'newError');
+  const success = !!messages && messages.some(message => message.type === 'success');
+  const interaction = getInteraction({
+    props
+  });
+  if (interaction === 'disabled' && upButtonState !== 'actionSecondaryDisabledColor') {
+    setUpButtonState('actionSecondaryDisabledColor');
+    setDownButtonState('actionSecondaryDisabledColor');
+  } else if (interaction === 'enabled' && downButtonState !== 'actionSecondaryBaseColor') {
+    setUpButtonState('actionSecondaryBaseColor');
+    setDownButtonState('actionSecondaryBaseColor');
+  }
+  // Styles - useStyle will pass these to generateStyle(componentTheme, params as props, params as state)
+  // We need to provide all values that generateStyle needs from both props and state
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      size,
+      textAlign,
+      interaction,
+      invalid,
+      success
+    },
+    componentId: 'NumberInput',
+    displayName: 'NumberInput',
+    useTokensFrom: 'TextInput'
+  });
+
+  // Event handlers
+  const handleInputRef = useCallback(element => {
+    inputRef.current = element;
+    if (typeof inputRefProp === 'function') {
+      inputRefProp(element);
+    }
+  }, [inputRefProp]);
+  const handleRef = useCallback(el => {
+    containerRef.current = el;
+  }, []);
+  const handleFocus = useCallback(event => {
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
+  }, [onFocus]);
+  const handleBlur = useCallback(event => {
+    if (typeof onBlur === 'function') {
+      onBlur(event);
+    }
+  }, [onBlur]);
+  const handleChange = useCallback(event => {
+    if (typeof onChange === 'function') {
+      onChange(event, event.target.value);
+    }
+  }, [onChange]);
+  const handleKeyDown = useCallback(event => {
+    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);
+      }
+    }
+  }, [onKeyDown, onDecrement, onIncrement]);
+  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();
+      if (typeof callback === 'function') {
+        callback(event);
+      }
+    }
+  }, [interaction]);
+  const handleClickUpArrow = useCallback(event => {
+    setUpButtonState('actionSecondaryActiveColor');
+    arrowClicked(event, onIncrement);
+  }, [arrowClicked, onIncrement]);
+  const handleClickDownArrow = useCallback(event => {
+    setDownButtonState('actionSecondaryActiveColor');
+    arrowClicked(event, onDecrement);
+  }, [arrowClicked, onDecrement]);
+
+  // 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();
+    },
+    get id() {
+      return id;
+    },
+    get invalid() {
+      return invalid;
+    },
+    get interaction() {
+      return interaction;
+    },
+    get value() {
+      var _inputRef$current3;
+      return (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value;
+    }
+  }), [id, invalid, interaction]);
+
+  // Render methods
+  const renderArrows = customIcons => {
+    return _jsxs("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.arrowContainer,
+      children: [_jsx("button", {
+        "aria-hidden": true,
+        css: styles === null || styles === void 0 ? void 0 : 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, {
+          size: "sm",
+          color: upButtonState
+        }))
+      }), _jsx("button", {
+        "aria-hidden": true,
+        css: styles === null || styles === void 0 ? void 0 : 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, {
+          size: "sm",
+          color: downButtonState
+        }))
+      })]
+    });
+  };
+  const label = callRenderProp(renderLabel);
+  const passedProps = passthroughProps(rest);
+
+  // Don't render until we have an ID
+  if (!id) {
+    return null;
+  }
+  return _jsx(FormField, {
+    ...pickProps(props, FormField.allowedProps),
+    label: label,
+    inline: display === 'inline-block',
+    id: id,
+    elementRef: handleRef,
+    margin: margin,
+    isRequired: isRequired,
+    disabled: interaction === 'disabled',
+    readOnly: interaction === 'readonly',
+    "data-cid": "NumberInput",
+    children: _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.inputWidth,
+      style: width ? {
+        width
+      } : void 0,
+      children: _jsxs("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.inputContainer,
+        children: [_jsx("input", {
+          ...passedProps,
+          css: styles === null || styles === void 0 ? void 0 : styles.input,
+          "aria-invalid": invalid ? 'true' : void 0,
+          id: id,
+          type: allowStringValue ? 'text' : 'number',
+          inputMode: inputMode,
+          placeholder: interaction === 'enabled' ? placeholder : void 0,
+          ref: handleInputRef,
+          required: isRequired,
+          value: value,
+          disabled: interaction === 'disabled',
+          readOnly: interaction === 'readonly',
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
+        }), showArrows && interaction !== 'readonly' ? renderArrows(renderIcons) : null]
+      })
+    })
+  });
+});
+NumberInput.displayName = 'NumberInput';
+export default NumberInput;
+export { NumberInput };

package/es/NumberInput/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons', 'margin'];
+export { allowedProps };

package/es/NumberInput/v2/styles.js

@@ -0,0 +1,208 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { calcFocusOutlineStyles } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @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 containerInteractionStates = {
+    ...(interaction === 'enabled' && {
+      backgroundColor: componentTheme.backgroundColor,
+      borderColor: componentTheme.borderColor,
+      ...(success && {
+        borderColor: componentTheme.successBorderColor
+      }),
+      ...(invalid && {
+        borderColor: componentTheme.errorBorderColor
+      }),
+      '&:hover': {
+        backgroundColor: componentTheme.backgroundHoverColor,
+        borderColor: componentTheme.borderHoverColor,
+        ...(success && {
+          borderColor: componentTheme.successBorderColor
+        }),
+        ...(invalid && {
+          borderColor: componentTheme.errorBorderColor
+        })
+      }
+    }),
+    ...(interaction === 'readonly' && {
+      backgroundColor: componentTheme.backgroundReadonlyColor,
+      borderColor: componentTheme.borderReadonlyColor
+    }),
+    ...(interaction === 'disabled' && {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      backgroundColor: componentTheme.backgroundDisabledColor,
+      borderColor: componentTheme.borderDisabledColor
+    })
+  };
+  const arrowInteractionStates = {
+    ...(interaction === 'enabled' && {
+      backgroundColor: componentTheme.arrowsBackgroundColor,
+      borderColor: componentTheme.arrowsBorderColor,
+      '&:hover': {
+        backgroundColor: componentTheme.arrowsBackgroundHoverColor,
+        borderColor: componentTheme.arrowsBorderHoverColor
+      },
+      '&:active': {
+        backgroundColor: componentTheme.arrowsBackgroundActiveColor,
+        borderColor: componentTheme.arrowsBorderActiveColor
+      }
+    }),
+    ...(interaction === 'disabled' && {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      backgroundColor: componentTheme.arrowsBackgroundDisabledColor,
+      borderColor: componentTheme.arrowsBorderDisabledColor
+    })
+    // arrow buttons are not rendered in the `readOnly` state
+  };
+  const inputInteractionStates = {
+    ...(interaction === 'enabled' && {
+      color: componentTheme.textColor,
+      '&::placeholder': {
+        color: componentTheme.placeholderColor
+      },
+      '&:hover::placeholder': {
+        color: componentTheme.placeholderHoverColor
+      }
+      // placeholder is not rendered in the `readOnly` and `disabled` state
+    }),
+    ...(interaction === 'readonly' && {
+      color: componentTheme.textReadonlyColor
+    }),
+    ...(interaction === 'disabled' && {
+      color: componentTheme.textDisabledColor
+    })
+  };
+  const inputStyle = {
+    all: 'initial',
+    textAlign: textAlign,
+    direction: 'inherit',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    appearance: 'none',
+    lineHeight: 1,
+    margin: '0',
+    flex: 1,
+    minWidth: '0.0625rem',
+    boxSizing: 'border-box',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    ...(size === 'medium' ? {
+      padding: componentTheme.paddingHorizontalMd
+    } : {
+      padding: componentTheme.paddingHorizontalLg
+    }),
+    ...inputInteractionStates
+  };
+  const focusOutline = calcFocusOutlineStyles(sharedTokens.focusOutline, {
+    focusWithin: true
+  });
+  return {
+    numberInput: {
+      label: 'numberInput'
+    },
+    arrowContainer: {
+      label: 'numberInput_arrowContainer',
+      flex: `0 0 ${componentTheme.arrowsContainerWidth}`,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    arrow: {
+      label: 'numberInput_arrow',
+      cursor: 'pointer',
+      userSelect: 'none',
+      textAlign: 'center',
+      flex: 1,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderTop: 'none',
+      borderInlineEnd: 'none',
+      borderInlineStart: `${componentTheme.borderWidth} solid`,
+      borderBottom: `${componentTheme.borderWidth} solid`,
+      '&:last-child': {
+        borderBottom: 'none'
+      },
+      ...arrowInteractionStates
+    },
+    inputWidth: {
+      label: 'numberInput_inputWidth',
+      display: 'block',
+      position: 'relative'
+    },
+    inputContainer: {
+      label: 'numberInput_inputContainer',
+      display: 'flex',
+      margin: '0',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      border: `${componentTheme.borderWidth} solid`,
+      borderRadius: componentTheme.borderRadius,
+      ...containerInteractionStates,
+      ...focusOutline,
+      ...(size === 'medium' ? {
+        fontSize: componentTheme.fontSizeMd,
+        height: componentTheme.heightMd
+      } : {
+        fontSize: componentTheme.fontSizeLg,
+        height: componentTheme.heightLg
+      })
+    },
+    input: {
+      label: 'numberInput_input',
+      ...inputStyle,
+      '&:is(input)[type]': inputStyle,
+      '&:-webkit-any(input)[type]': inputStyle,
+      '&::-webkit-inner-spin-button': {
+        display: 'none'
+      },
+      '&::-webkit-outer-spin-button': {
+        display: 'none'
+      },
+      '&:is(input)[type="number"]': {
+        MozAppearance: 'textfield'
+      }
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { NumberInput } from "./NumberInput/index.js";
+export { NumberInput } from "../NumberInput/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { NumberInput } from './NumberInput'
-export type { NumberInputProps } from './NumberInput/props'
+export { NumberInput } from "../NumberInput/v2/index.js";

package/lib/NumberInput/{index.js → v1/index.js}

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.NumberInput = void 0;
 var _react = require("react");
 var _keycode = _interopRequireDefault(require("keycode"));
-var _FormField = require("@instructure/ui-form-field/lib/FormField");
-var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDownLine.js");
-var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
+var _v11_ = require("@instructure/ui-form-field/v11_6");
+var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
+var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -51,7 +51,7 @@ category: components
 id: NumberInput
 ---
 **/
-let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_NumberInput = class NumberInput extends _react.Component {
+let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_NumberInput = class NumberInput extends _react.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -204,8 +204,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
         children: [' ', "*"]
       })]
     }) : rawLabel;
-    return (0, _jsxRuntime.jsx)(_FormField.FormField, {
-      ...(0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps),
+    return (0, _jsxRuntime.jsx)(_v11_.FormField, {
+      ...(0, _pickProps.pickProps)(this.props, _v11_.FormField.allowedProps),
       label: label,
       inline: display === 'inline-block',
       id: this.id,
@@ -220,7 +220,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
         children: (0, _jsxRuntime.jsxs)("span", {
           css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.inputContainer,
           children: [(0, _jsxRuntime.jsx)("input", {
-            ...(0, _omitProps.omitProps)(this.props, [..._FormField.FormField.allowedProps, ...NumberInput.allowedProps]),
+            ...(0, _omitProps.omitProps)(this.props, [..._v11_.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,
             id: this.id,