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

package/lib/NumberInput/v2/index.js

@@ -0,0 +1,301 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NumberInput = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _keycode = _interopRequireDefault(require("keycode"));
+var _latest = require("@instructure/ui-form-field/latest");
+var _uiIcons = require("@instructure/ui-icons");
+var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
+var _useDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/useDeterministicId.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+category: components
+id: NumberInput
+---
+**/
+const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  // these are icon tokens
+
+  const _useState = (0, _react.useState)('actionSecondaryBaseColor'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    upButtonState = _useState2[0],
+    setUpButtonState = _useState2[1];
+  const _useState3 = (0, _react.useState)('actionSecondaryBaseColor'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    downButtonState = _useState4[0],
+    setDownButtonState = _useState4[1];
+  // Refs
+  const containerRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+
+  // Deterministic ID generation
+  const _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    deterministicId = _useState6[0],
+    setDeterministicId = _useState6[1];
+  const getId = (0, _useDeterministicId.useDeterministicId)('NumberInput');
+  (0, _react.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 = (0, _getInteraction.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 = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    themeOverride,
+    params: {
+      size,
+      textAlign,
+      interaction,
+      invalid,
+      success
+    },
+    componentId: 'NumberInput',
+    displayName: 'NumberInput',
+    useTokensFrom: 'TextInput'
+  });
+
+  // Event handlers
+  const handleInputRef = (0, _react.useCallback)(element => {
+    inputRef.current = element;
+    if (typeof inputRefProp === 'function') {
+      inputRefProp(element);
+    }
+  }, [inputRefProp]);
+  const handleRef = (0, _react.useCallback)(el => {
+    containerRef.current = el;
+  }, []);
+  const handleFocus = (0, _react.useCallback)(event => {
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(event => {
+    if (typeof onBlur === 'function') {
+      onBlur(event);
+    }
+  }, [onBlur]);
+  const handleChange = (0, _react.useCallback)(event => {
+    if (typeof onChange === 'function') {
+      onChange(event, event.target.value);
+    }
+  }, [onChange]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+    if (event.keyCode === _keycode.default.codes.down) {
+      event.preventDefault();
+      if (typeof onDecrement === 'function') {
+        onDecrement(event);
+      }
+    } else if (event.keyCode === _keycode.default.codes.up) {
+      event.preventDefault();
+      if (typeof onIncrement === 'function') {
+        onIncrement(event);
+      }
+    }
+  }, [onKeyDown, onDecrement, onIncrement]);
+  const arrowClicked = (0, _react.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 = (0, _react.useCallback)(event => {
+    setUpButtonState('actionSecondaryActiveColor');
+    arrowClicked(event, onIncrement);
+  }, [arrowClicked, onIncrement]);
+  const handleClickDownArrow = (0, _react.useCallback)(event => {
+    setDownButtonState('actionSecondaryActiveColor');
+    arrowClicked(event, onDecrement);
+  }, [arrowClicked, onDecrement]);
+
+  // Expose imperative API via ref
+  (0, _react.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 (0, _jsxRuntime.jsxs)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.arrowContainer,
+      children: [(0, _jsxRuntime.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 ? (0, _callRenderProp.callRenderProp)(customIcons.increase) : _ChevronUpInstUIIcon || (_ChevronUpInstUIIcon = (0, _jsxRuntime.jsx)(_uiIcons.ChevronUpInstUIIcon, {
+          size: "sm",
+          color: upButtonState
+        }))
+      }), (0, _jsxRuntime.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 ? (0, _callRenderProp.callRenderProp)(customIcons.decrease) : _ChevronDownInstUIIco || (_ChevronDownInstUIIco = (0, _jsxRuntime.jsx)(_uiIcons.ChevronDownInstUIIcon, {
+          size: "sm",
+          color: downButtonState
+        }))
+      })]
+    });
+  };
+  const label = (0, _callRenderProp.callRenderProp)(renderLabel);
+  const passedProps = (0, _passthroughProps.passthroughProps)(rest);
+
+  // Don't render until we have an ID
+  if (!id) {
+    return null;
+  }
+  return (0, _jsxRuntime.jsx)(_latest.FormField, {
+    ...(0, _pickProps.pickProps)(props, _latest.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: (0, _jsxRuntime.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.inputWidth,
+      style: width ? {
+        width
+      } : void 0,
+      children: (0, _jsxRuntime.jsxs)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.inputContainer,
+        children: [(0, _jsxRuntime.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';
+var _default = exports.default = NumberInput;

package/lib/NumberInput/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons', 'margin'];

package/lib/NumberInput/v2/styles.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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 = (0, _emotion.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'
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
   get: function () {
-    return _NumberInput.NumberInput;
+    return _v.NumberInput;
   }
 });
-var _NumberInput = require("./NumberInput");
+var _v = require("../NumberInput/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NumberInput", {
+  enumerable: true,
+  get: function () {
+    return _v.NumberInput;
+  }
+});
+var _v = require("../NumberInput/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,23 +16,23 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "keycode": "^2",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-form-field": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/uid": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-form-field": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "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.6.0",
-    "@instructure/ui-scripts": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-scripts": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -42,17 +42,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/NumberInput/{index.tsx → v1/index.tsx}

@@ -25,7 +25,7 @@
 import { Fragment, Component } from 'react'
 import keycode from 'keycode'
 
-import { FormField } from '@instructure/ui-form-field'
+import { FormField } from '@instructure/ui-form-field/v11_6'
 import {
   IconArrowOpenDownLine,
   IconArrowOpenUpLine
@@ -39,7 +39,7 @@ import {
 } from '@instructure/ui-react-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'