@instructure/ui-range-input 10.11.1-snapshot-10 → 10.11.1-snapshot-12

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-10) (2025-02-21)
+## [10.11.1-snapshot-12](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-12) (2025-02-21)
 
 **Note:** Version bump only for package @instructure/ui-range-input
 

package/es/RangeInput/__new-tests__/RangeInput.test.js

@@ -0,0 +1,220 @@
+var _RangeInput, _RangeInput2, _RangeInput3, _RangeInput4, _RangeInput5, _RangeInput6, _RangeInput7, _RangeInput8, _RangeInput9, _RangeInput10, _RangeInput11;
+/*
+ * 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 React from 'react';
+import { render, screen } from '@testing-library/react';
+import { vi, expect } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { RangeInput } from '../index';
+describe('<RangeInput />', () => {
+  let consoleWarningMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+  });
+  it('renders an input with type "range"', async () => {
+    const _render = render(_RangeInput || (_RangeInput = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0
+      }))),
+      container = _render.container;
+    const label = container.querySelector('[class$="-formFieldLabel"]');
+    const input = container.querySelector('[class$="-rangeInput__input"]');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent('Opacity');
+    expect(input).toBeInTheDocument();
+    expect(input.tagName).toBe('INPUT');
+    expect(input).toHaveAttribute('name', 'opacity');
+    expect(input).toHaveAttribute('type', 'range');
+  });
+  it('displays the default value', async () => {
+    const _render2 = render(_RangeInput2 || (_RangeInput2 = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 42
+      }))),
+      container = _render2.container;
+    const output = container.querySelector('[class$="-rangeInput__value"]');
+    expect(output).toHaveTextContent('42');
+  });
+  it('sets input value to default value', async () => {
+    const _render3 = render(_RangeInput3 || (_RangeInput3 = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 25
+      }))),
+      container = _render3.container;
+    const input = container.querySelector('input');
+    expect(input).toHaveValue('25');
+  });
+  it('sets input value to controlled value', async () => {
+    const _render4 = render(/*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        value: 25,
+        onChange: () => {}
+      })),
+      container = _render4.container;
+    const input = container.querySelector('input');
+    expect(input).toHaveValue('25');
+  });
+  describe('thumbVariant prop', () => {
+    it('should throw deprecation warning by default', async () => {
+      render(_RangeInput4 || (_RangeInput4 = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 30
+      })));
+      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+    });
+    it('should throw deprecation warning when explicitly "deprecated"', async () => {
+      render(_RangeInput5 || (_RangeInput5 = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 30,
+        thumbVariant: "deprecated"
+      })));
+      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
+      expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+    });
+    it('should not throw deprecation warning when "accessible"', async () => {
+      render(_RangeInput6 || (_RangeInput6 = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 30,
+        thumbVariant: "accessible"
+      })));
+      expect(consoleWarningMock).not.toHaveBeenCalled();
+    });
+  });
+  it('sets min value', async () => {
+    render(_RangeInput7 || (_RangeInput7 = /*#__PURE__*/React.createElement(RangeInput, {
+      label: "Opacity",
+      name: "opacity",
+      max: 100,
+      min: 25
+    })));
+    const input = screen.getByLabelText('Opacity');
+    expect(input).toHaveAttribute('min', '25');
+  });
+  it('sets max value', async () => {
+    render(_RangeInput8 || (_RangeInput8 = /*#__PURE__*/React.createElement(RangeInput, {
+      label: "Opacity",
+      name: "opacity",
+      max: 75,
+      min: 0
+    })));
+    const input = screen.getByLabelText('Opacity');
+    expect(input).toHaveAttribute('max', '75');
+  });
+  it('sets step value', async () => {
+    render(_RangeInput9 || (_RangeInput9 = /*#__PURE__*/React.createElement(RangeInput, {
+      label: "Opacity",
+      name: "opacity",
+      max: 100,
+      min: 0,
+      step: 5
+    })));
+    const input = screen.getByLabelText('Opacity');
+    expect(input).toHaveAttribute('step', '5');
+  });
+  it('formats the value displayed', async () => {
+    const _render5 = render(/*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 45,
+        formatValue: value => {
+          return `${value}%`;
+        }
+      })),
+      container = _render5.container;
+    const output = container.querySelector('[class$="-rangeInput__value"]');
+    expect(output).toHaveTextContent('45%');
+  });
+  it('hides the value when displayValue is false', async () => {
+    const _render6 = render(_RangeInput10 || (_RangeInput10 = /*#__PURE__*/React.createElement(RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        displayValue: false
+      }))),
+      container = _render6.container;
+    const output = container.querySelector('[class$="-rangeInput__value"]');
+    expect(output).not.toBeInTheDocument();
+  });
+  describe('for a11y', () => {
+    it('should meet standards', async () => {
+      const _render7 = render(_RangeInput11 || (_RangeInput11 = /*#__PURE__*/React.createElement(RangeInput, {
+          label: "Opacity",
+          name: "opacity",
+          max: 100,
+          min: 0,
+          defaultValue: 50
+        }))),
+        container = _render7.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('formats the aria-valuetext attribute', async () => {
+      const _render8 = render(/*#__PURE__*/React.createElement(RangeInput, {
+          label: "Opacity",
+          name: "opacity",
+          max: 100,
+          min: 0,
+          defaultValue: 40,
+          formatValue: value => {
+            return `${value}%`;
+          }
+        })),
+        container = _render8.container;
+      const input = container.querySelector('input');
+      const output = container.querySelector('[class$="-rangeInput__value"]');
+      expect(input).toHaveAttribute('aria-valuetext', '40%');
+      expect(output).toHaveTextContent('40%');
+    });
+  });
+});

package/es/RangeInput/index.js

@@ -103,13 +103,6 @@ let RangeInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
     return typeof value === 'string' ? parseInt(value) : value;
   }
-
-  // TODO is this getter even user for anything?
-  get invalid() {
-    return this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error' || message.type === 'newError';
-    }) >= 0;
-  }
   get id() {
     return this.props.id || this.defaultId;
   }

package/lib/RangeInput/__new-tests__/RangeInput.test.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _RangeInput, _RangeInput2, _RangeInput3, _RangeInput4, _RangeInput5, _RangeInput6, _RangeInput7, _RangeInput8, _RangeInput9, _RangeInput10, _RangeInput11;
+/*
+ * 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.
+ */
+describe('<RangeInput />', () => {
+  let consoleWarningMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+  });
+  it('renders an input with type "range"', async () => {
+    const _render = (0, _react2.render)(_RangeInput || (_RangeInput = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0
+      }))),
+      container = _render.container;
+    const label = container.querySelector('[class$="-formFieldLabel"]');
+    const input = container.querySelector('[class$="-rangeInput__input"]');
+    (0, _vitest.expect)(label).toBeInTheDocument();
+    (0, _vitest.expect)(label).toHaveTextContent('Opacity');
+    (0, _vitest.expect)(input).toBeInTheDocument();
+    (0, _vitest.expect)(input.tagName).toBe('INPUT');
+    (0, _vitest.expect)(input).toHaveAttribute('name', 'opacity');
+    (0, _vitest.expect)(input).toHaveAttribute('type', 'range');
+  });
+  it('displays the default value', async () => {
+    const _render2 = (0, _react2.render)(_RangeInput2 || (_RangeInput2 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 42
+      }))),
+      container = _render2.container;
+    const output = container.querySelector('[class$="-rangeInput__value"]');
+    (0, _vitest.expect)(output).toHaveTextContent('42');
+  });
+  it('sets input value to default value', async () => {
+    const _render3 = (0, _react2.render)(_RangeInput3 || (_RangeInput3 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 25
+      }))),
+      container = _render3.container;
+    const input = container.querySelector('input');
+    (0, _vitest.expect)(input).toHaveValue('25');
+  });
+  it('sets input value to controlled value', async () => {
+    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        value: 25,
+        onChange: () => {}
+      })),
+      container = _render4.container;
+    const input = container.querySelector('input');
+    (0, _vitest.expect)(input).toHaveValue('25');
+  });
+  describe('thumbVariant prop', () => {
+    it('should throw deprecation warning by default', async () => {
+      (0, _react2.render)(_RangeInput4 || (_RangeInput4 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 30
+      })));
+      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
+      (0, _vitest.expect)(consoleWarningMock).toHaveBeenCalledWith(_vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
+    });
+    it('should throw deprecation warning when explicitly "deprecated"', async () => {
+      (0, _react2.render)(_RangeInput5 || (_RangeInput5 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 30,
+        thumbVariant: "deprecated"
+      })));
+      const expectedErrorMessage = "Warning: [RangeInput] The 'deprecated' value for the `thumbVariant` prop is deprecated. The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.";
+      (0, _vitest.expect)(consoleWarningMock).toHaveBeenCalledWith(_vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
+    });
+    it('should not throw deprecation warning when "accessible"', async () => {
+      (0, _react2.render)(_RangeInput6 || (_RangeInput6 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 30,
+        thumbVariant: "accessible"
+      })));
+      (0, _vitest.expect)(consoleWarningMock).not.toHaveBeenCalled();
+    });
+  });
+  it('sets min value', async () => {
+    (0, _react2.render)(_RangeInput7 || (_RangeInput7 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+      label: "Opacity",
+      name: "opacity",
+      max: 100,
+      min: 25
+    })));
+    const input = _react2.screen.getByLabelText('Opacity');
+    (0, _vitest.expect)(input).toHaveAttribute('min', '25');
+  });
+  it('sets max value', async () => {
+    (0, _react2.render)(_RangeInput8 || (_RangeInput8 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+      label: "Opacity",
+      name: "opacity",
+      max: 75,
+      min: 0
+    })));
+    const input = _react2.screen.getByLabelText('Opacity');
+    (0, _vitest.expect)(input).toHaveAttribute('max', '75');
+  });
+  it('sets step value', async () => {
+    (0, _react2.render)(_RangeInput9 || (_RangeInput9 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+      label: "Opacity",
+      name: "opacity",
+      max: 100,
+      min: 0,
+      step: 5
+    })));
+    const input = _react2.screen.getByLabelText('Opacity');
+    (0, _vitest.expect)(input).toHaveAttribute('step', '5');
+  });
+  it('formats the value displayed', async () => {
+    const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        defaultValue: 45,
+        formatValue: value => {
+          return `${value}%`;
+        }
+      })),
+      container = _render5.container;
+    const output = container.querySelector('[class$="-rangeInput__value"]');
+    (0, _vitest.expect)(output).toHaveTextContent('45%');
+  });
+  it('hides the value when displayValue is false', async () => {
+    const _render6 = (0, _react2.render)(_RangeInput10 || (_RangeInput10 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+        label: "Opacity",
+        name: "opacity",
+        max: 100,
+        min: 0,
+        displayValue: false
+      }))),
+      container = _render6.container;
+    const output = container.querySelector('[class$="-rangeInput__value"]');
+    (0, _vitest.expect)(output).not.toBeInTheDocument();
+  });
+  describe('for a11y', () => {
+    it('should meet standards', async () => {
+      const _render7 = (0, _react2.render)(_RangeInput11 || (_RangeInput11 = /*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+          label: "Opacity",
+          name: "opacity",
+          max: 100,
+          min: 0,
+          defaultValue: 50
+        }))),
+        container = _render7.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      (0, _vitest.expect)(axeCheck).toBe(true);
+    });
+    it('formats the aria-valuetext attribute', async () => {
+      const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RangeInput, {
+          label: "Opacity",
+          name: "opacity",
+          max: 100,
+          min: 0,
+          defaultValue: 40,
+          formatValue: value => {
+            return `${value}%`;
+          }
+        })),
+        container = _render8.container;
+      const input = container.querySelector('input');
+      const output = container.querySelector('[class$="-rangeInput__value"]');
+      (0, _vitest.expect)(input).toHaveAttribute('aria-valuetext', '40%');
+      (0, _vitest.expect)(output).toHaveTextContent('40%');
+    });
+  });
+});

package/lib/RangeInput/index.js

@@ -111,13 +111,6 @@ let RangeInput = exports.RangeInput = (_dec = (0, _withDeterministicId.withDeter
     const value = typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
     return typeof value === 'string' ? parseInt(value) : value;
   }
-
-  // TODO is this getter even user for anything?
-  get invalid() {
-    return this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error' || message.type === 'newError';
-    }) >= 0;
-  }
   get id() {
     return this.props.id || this.defaultId;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "10.11.1-snapshot-10",
+  "version": "10.11.1-snapshot-12",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,26 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.11.1-snapshot-10",
-    "@instructure/emotion": "10.11.1-snapshot-10",
-    "@instructure/shared-types": "10.11.1-snapshot-10",
-    "@instructure/ui-color-utils": "10.11.1-snapshot-10",
-    "@instructure/ui-dom-utils": "10.11.1-snapshot-10",
-    "@instructure/ui-form-field": "10.11.1-snapshot-10",
-    "@instructure/ui-i18n": "10.11.1-snapshot-10",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-10",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-10",
-    "@instructure/ui-testable": "10.11.1-snapshot-10",
-    "@instructure/ui-utils": "10.11.1-snapshot-10",
-    "@instructure/ui-view": "10.11.1-snapshot-10",
-    "@instructure/uid": "10.11.1-snapshot-10",
+    "@instructure/console": "10.11.1-snapshot-12",
+    "@instructure/emotion": "10.11.1-snapshot-12",
+    "@instructure/shared-types": "10.11.1-snapshot-12",
+    "@instructure/ui-color-utils": "10.11.1-snapshot-12",
+    "@instructure/ui-dom-utils": "10.11.1-snapshot-12",
+    "@instructure/ui-form-field": "10.11.1-snapshot-12",
+    "@instructure/ui-i18n": "10.11.1-snapshot-12",
+    "@instructure/ui-prop-types": "10.11.1-snapshot-12",
+    "@instructure/ui-react-utils": "10.11.1-snapshot-12",
+    "@instructure/ui-testable": "10.11.1-snapshot-12",
+    "@instructure/ui-utils": "10.11.1-snapshot-12",
+    "@instructure/ui-view": "10.11.1-snapshot-12",
+    "@instructure/uid": "10.11.1-snapshot-12",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-10",
-    "@instructure/ui-test-locator": "10.11.1-snapshot-10",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-10",
-    "@instructure/ui-themes": "10.11.1-snapshot-10"
+    "@instructure/ui-axe-check": "10.11.1-snapshot-12",
+    "@instructure/ui-babel-preset": "10.11.1-snapshot-12",
+    "@instructure/ui-test-utils": "10.11.1-snapshot-12",
+    "@instructure/ui-themes": "10.11.1-snapshot-12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"