@instructure/ui-tabs 11.7.4-snapshot-14 → 11.7.4-snapshot-49

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.
 
-## [11.7.4-snapshot-14](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-14) (2026-05-20)
+## [11.7.4-snapshot-49](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-49) (2026-06-17)
 
 **Note:** Version bump only for package @instructure/ui-tabs
 

package/LICENSE.md

@@ -2,6 +2,7 @@
 title: The MIT License (MIT)
 category: Getting Started
 order: 9
+isWIP: true
 ---
 
 # The MIT License (MIT)

package/es/Tabs/v1/Panel/index.js

@@ -28,9 +28,10 @@ import { View } from '@instructure/ui-view/v11_6';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { Transition } from '@instructure/ui-motion';
 import { withStyle } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import generateComponentTheme from './theme.js';
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Tabs
@@ -39,7 +40,7 @@ id: Tabs.Panel
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Panel extends Component {
-  static displayName = "Panel";
+  static displayName = 'Panel';
   static componentId = 'Tabs.Panel';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Tabs/v1/Tab/index.js

@@ -27,9 +27,10 @@ import { Component } from 'react';
 import { passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view/v11_6';
 import { withStyle } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import generateComponentTheme from './theme.js';
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Tabs
@@ -38,7 +39,7 @@ id: Tabs.Tab
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tab extends Component {
-  static displayName = "Tab";
+  static displayName = 'Tab';
   static componentId = 'Tabs.Tab';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Tabs/v1/index.js

@@ -34,11 +34,11 @@ import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
 import { px } from '@instructure/ui-utils';
 import { withStyle } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { Tab } from "./Tab/index.js";
-import { Panel } from "./Panel/index.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import generateComponentTheme from './theme.js';
+import { Tab } from './Tab/index.js';
+import { Panel } from './Panel/index.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -46,7 +46,7 @@ category: components
 ---
 **/
 let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tabs extends Component {
-  static displayName = "Tabs";
+  static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Tabs/v2/Panel/index.js

@@ -28,8 +28,9 @@ import { View } from '@instructure/ui-view/latest';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { Transition } from '@instructure/ui-motion';
 import { withStyleNew } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Tabs
@@ -38,7 +39,7 @@ id: Tabs.Panel
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Panel = (_dec = withStyleNew(generateStyle), _dec(_class = class Panel extends Component {
-  static displayName = "Panel";
+  static displayName = 'Panel';
   static componentId = 'Tabs.Panel';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Tabs/v2/Tab/index.js

@@ -27,8 +27,9 @@ import { Component } from 'react';
 import { passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view/latest';
 import { withStyleNew } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { allowedProps } from './props.js';
+
 /**
 ---
 parent: Tabs
@@ -37,7 +38,7 @@ id: Tabs.Tab
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Tab = (_dec = withStyleNew(generateStyle), _dec(_class = class Tab extends Component {
-  static displayName = "Tab";
+  static displayName = 'Tab';
   static componentId = 'Tabs.Tab';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Tabs/v2/index.js

@@ -34,10 +34,10 @@ import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { debounce } from '@instructure/debounce';
 import { px } from '@instructure/ui-utils';
 import { withStyleNew } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import { Tab } from "./Tab/index.js";
-import { Panel } from "./Panel/index.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { Tab } from './Tab/index.js';
+import { Panel } from './Panel/index.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -45,7 +45,7 @@ category: components
 ---
 **/
 let Tabs = (_dec = withStyleNew(generateStyle), _dec(_class = class Tabs extends Component {
-  static displayName = "Tabs";
+  static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/exports/a.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Tabs } from "../Tabs/v1/index.js";
-export { Panel as TabsPanel } from "../Tabs/v1/Panel/index.js";
-export { Tab as TabsTab } from "../Tabs/v1/Tab/index.js";
+
+export { Tabs } from '../Tabs/v1/index.js';
+export { Panel as TabsPanel } from '../Tabs/v1/Panel/index.js';
+export { Tab as TabsTab } from '../Tabs/v1/Tab/index.js';

package/es/exports/b.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Tabs } from "../Tabs/v2/index.js";
-export { Panel as TabsPanel } from "../Tabs/v2/Panel/index.js";
-export { Tab as TabsTab } from "../Tabs/v2/Tab/index.js";
+
+export { Tabs } from '../Tabs/v2/index.js';
+export { Panel as TabsPanel } from '../Tabs/v2/Panel/index.js';
+export { Tab as TabsTab } from '../Tabs/v2/Tab/index.js';

package/lib/Tabs/v1/Panel/index.js

@@ -10,9 +10,9 @@ var _v11_ = require("@instructure/ui-view/v11_6");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _theme = _interopRequireDefault(require("./theme.js"));
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class;
 /*
@@ -45,7 +45,7 @@ id: Tabs.Panel
 ---
 **/
 let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Panel extends _react.Component {
-  static displayName = "Panel";
+  static displayName = 'Panel';
   static componentId = 'Tabs.Panel';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/Tabs/v1/Tab/index.js

@@ -10,9 +10,9 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _v11_ = require("@instructure/ui-view/v11_6");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _theme = _interopRequireDefault(require("./theme.js"));
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class;
 /*
@@ -45,7 +45,7 @@ id: Tabs.Tab
 ---
 **/
 let Tab = exports.Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Tab extends _react.Component {
-  static displayName = "Tab";
+  static displayName = 'Tab';
   static componentId = 'Tabs.Tab';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/Tabs/v1/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function () {
-    return _Panel.Panel;
+    return _index2.Panel;
   }
 });
 exports.default = exports.Tabs = void 0;
@@ -24,11 +24,11 @@ var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingC
 var _debounce = require("@instructure/debounce");
 var _px = require("@instructure/ui-utils/lib/px.js");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _Tab = require("./Tab");
-var _Panel = require("./Panel");
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _theme = _interopRequireDefault(require("./theme.js"));
+var _index = require("./Tab/index.js");
+var _index2 = require("./Panel/index.js");
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class;
 /*
@@ -60,7 +60,7 @@ category: components
 ---
 **/
 let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Tabs extends _react.Component {
-  static displayName = "Tabs";
+  static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
@@ -68,8 +68,8 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     shouldFocusOnRender: false,
     tabOverflow: 'stack'
   };
-  static Panel = _Panel.Panel;
-  static Tab = _Tab.Tab;
+  static Panel = _index2.Panel;
+  static Tab = _index.Tab;
   _tabList = null;
   _focusable = null;
   _tabListPosition;
@@ -230,7 +230,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
   };
   getNextTab(startIndex, step) {
-    const tabs = _react.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel]) && child);
+    const tabs = _react.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel]) && child);
     const count = tabs.length;
     const change = step < 0 ? step + count : step;
     (0, _console.logError)(startIndex >= 0 && startIndex < count, `[Tabs] Invalid tab index: '${startIndex}'.`);
@@ -268,7 +268,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   }
   createTab(index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId;
-    return (0, _jsxRuntime.jsx)(_Tab.Tab, {
+    return (0, _jsxRuntime.jsx)(_index.Tab, {
       variant: this.props.variant,
       id: `tab-${id}`,
       controls: panel.props.id || `panel-${id}`,
@@ -352,14 +352,14 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       styles,
       ...props
     } = this.props;
-    const activePanels = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).filter(child => child.props.active);
+    const activePanels = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])).filter(child => child.props.active);
     if (activePanels.length > 1) {
       (0, _console.logError)(false, `[Tabs] Only one Panel can be marked as active.`);
     }
-    const selectedChildIndex = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
+    const selectedChildIndex = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
     const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
     _react.Children.toArray(children).map((child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
         const id = (0, _uid.uid)();
         tabs.push(this.createTab(index, id, selected, child));

package/lib/Tabs/v2/Panel/index.js

@@ -10,8 +10,8 @@ var _latest = require("@instructure/ui-view/latest");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class;
 /*
@@ -44,7 +44,7 @@ id: Tabs.Panel
 ---
 **/
 let Panel = exports.Panel = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Panel extends _react.Component {
-  static displayName = "Panel";
+  static displayName = 'Panel';
   static componentId = 'Tabs.Panel';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/Tabs/v2/Tab/index.js

@@ -10,8 +10,8 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _latest = require("@instructure/ui-view/latest");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class;
 /*
@@ -44,7 +44,7 @@ id: Tabs.Tab
 ---
 **/
 let Tab = exports.Tab = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Tab extends _react.Component {
-  static displayName = "Tab";
+  static displayName = 'Tab';
   static componentId = 'Tabs.Tab';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/Tabs/v2/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function () {
-    return _Panel.Panel;
+    return _index2.Panel;
   }
 });
 exports.default = exports.Tabs = void 0;
@@ -24,10 +24,10 @@ var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingC
 var _debounce = require("@instructure/debounce");
 var _px = require("@instructure/ui-utils/lib/px.js");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _Tab = require("./Tab");
-var _Panel = require("./Panel");
-var _props = require("./props");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _index = require("./Tab/index.js");
+var _index2 = require("./Panel/index.js");
+var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class;
 /*
@@ -59,7 +59,7 @@ category: components
 ---
 **/
 let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Tabs extends _react.Component {
-  static displayName = "Tabs";
+  static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
@@ -67,8 +67,8 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
     shouldFocusOnRender: false,
     tabOverflow: 'stack'
   };
-  static Panel = _Panel.Panel;
-  static Tab = _Tab.Tab;
+  static Panel = _index2.Panel;
+  static Tab = _index.Tab;
   _tabList = null;
   _focusable = null;
   _tabListPosition;
@@ -229,7 +229,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
     this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
   };
   getNextTab(startIndex, step) {
-    const tabs = _react.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel]) && child);
+    const tabs = _react.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel]) && child);
     const count = tabs.length;
     const change = step < 0 ? step + count : step;
     (0, _console.logError)(startIndex >= 0 && startIndex < count, `[Tabs] Invalid tab index: '${startIndex}'.`);
@@ -267,7 +267,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
   }
   createTab(index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId;
-    return (0, _jsxRuntime.jsx)(_Tab.Tab, {
+    return (0, _jsxRuntime.jsx)(_index.Tab, {
       variant: this.props.variant,
       id: `tab-${id}`,
       controls: panel.props.id || `panel-${id}`,
@@ -351,14 +351,14 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
       styles,
       ...props
     } = this.props;
-    const activePanels = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).filter(child => child.props.active);
+    const activePanels = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])).filter(child => child.props.active);
     if (activePanels.length > 1) {
       (0, _console.logError)(false, `[Tabs] Only one Panel can be marked as active.`);
     }
-    const selectedChildIndex = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
+    const selectedChildIndex = _react.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
     const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
     _react.Children.toArray(children).map((child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
         const id = (0, _uid.uid)();
         tabs.push(this.createTab(index, id, selected, child));

package/lib/exports/a.js

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
-    return _v.Tabs;
+    return _index.Tabs;
   }
 });
 Object.defineProperty(exports, "TabsPanel", {
   enumerable: true,
   get: function () {
-    return _Panel.Panel;
+    return _index2.Panel;
   }
 });
 Object.defineProperty(exports, "TabsTab", {
   enumerable: true,
   get: function () {
-    return _Tab.Tab;
+    return _index3.Tab;
   }
 });
-var _v = require("../Tabs/v1");
-var _Panel = require("../Tabs/v1/Panel");
-var _Tab = require("../Tabs/v1/Tab");
+var _index = require("../Tabs/v1/index.js");
+var _index2 = require("../Tabs/v1/Panel/index.js");
+var _index3 = require("../Tabs/v1/Tab/index.js");

package/lib/exports/b.js

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
-    return _v.Tabs;
+    return _index.Tabs;
   }
 });
 Object.defineProperty(exports, "TabsPanel", {
   enumerable: true,
   get: function () {
-    return _Panel.Panel;
+    return _index2.Panel;
   }
 });
 Object.defineProperty(exports, "TabsTab", {
   enumerable: true,
   get: function () {
-    return _Tab.Tab;
+    return _index3.Tab;
   }
 });
-var _v = require("../Tabs/v2");
-var _Panel = require("../Tabs/v2/Panel");
-var _Tab = require("../Tabs/v2/Tab");
+var _index = require("../Tabs/v2/index.js");
+var _index2 = require("../Tabs/v2/Panel/index.js");
+var _index3 = require("../Tabs/v2/Tab/index.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "11.7.4-snapshot-14",
+  "version": "11.7.4-snapshot-49",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,28 +16,28 @@
   "dependencies": {
     "@babel/runtime": "^7.29.2",
     "keycode": "^2",
-    "@instructure/console": "11.7.4-snapshot-14",
-    "@instructure/debounce": "11.7.4-snapshot-14",
-    "@instructure/emotion": "11.7.4-snapshot-14",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-14",
-    "@instructure/shared-types": "11.7.4-snapshot-14",
-    "@instructure/ui-focusable": "11.7.4-snapshot-14",
-    "@instructure/ui-motion": "11.7.4-snapshot-14",
-    "@instructure/ui-i18n": "11.7.4-snapshot-14",
-    "@instructure/ui-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-view": "11.7.4-snapshot-14",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-themes": "11.7.4-snapshot-14",
-    "@instructure/uid": "11.7.4-snapshot-14"
+    "@instructure/console": "11.7.4-snapshot-49",
+    "@instructure/debounce": "11.7.4-snapshot-49",
+    "@instructure/emotion": "11.7.4-snapshot-49",
+    "@instructure/shared-types": "11.7.4-snapshot-49",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-focusable": "11.7.4-snapshot-49",
+    "@instructure/ui-i18n": "11.7.4-snapshot-49",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-motion": "11.7.4-snapshot-49",
+    "@instructure/ui-themes": "11.7.4-snapshot-49",
+    "@instructure/ui-view": "11.7.4-snapshot-49",
+    "@instructure/ui-utils": "11.7.4-snapshot-49",
+    "@instructure/uid": "11.7.4-snapshot-49"
   },
   "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-axe-check": "11.7.4-snapshot-14",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-14",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-14"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-49",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-49",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-49"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Tabs/v1/Panel/index.tsx

@@ -30,10 +30,10 @@ import { Transition } from '@instructure/ui-motion'
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 import type { TabsPanelProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 
 /**
 ---
@@ -43,6 +43,7 @@ id: Tabs.Panel
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Panel extends Component<TabsPanelProps> {
+  static displayName = 'Panel'
   static readonly componentId = 'Tabs.Panel'
 
   static allowedProps = allowedProps

package/src/Tabs/v1/Tab/index.tsx

@@ -30,11 +30,11 @@ import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
 import type { TabsTabProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 
 /**
 ---
@@ -44,6 +44,7 @@ id: Tabs.Tab
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Tab extends Component<TabsTabProps> {
+  static displayName = 'Tab'
   static readonly componentId = 'Tabs.Tab'
 
   static allowedProps = allowedProps

package/src/Tabs/v1/index.tsx

@@ -50,13 +50,13 @@ import { px } from '@instructure/ui-utils'
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { Tab } from './Tab'
-import { Panel } from './Panel'
+import { Tab } from './Tab/index.js'
+import { Panel } from './Panel/index.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { TabsProps, TabsState } from './props'
 
 import type { TabsTabProps } from './Tab/props'
@@ -72,6 +72,7 @@ category: components
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Tabs extends Component<TabsProps, TabsState> {
+  static displayName = 'Tabs'
   static readonly componentId = 'Tabs'
 
   static allowedProps = allowedProps

package/src/Tabs/v2/Panel/index.tsx

@@ -30,9 +30,9 @@ import { Transition } from '@instructure/ui-motion'
 
 import { withStyleNew } from '@instructure/emotion'
 
-import generateStyle from './styles'
+import generateStyle from './styles.js'
 import type { TabsPanelProps } from './props'
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 
 /**
 ---
@@ -42,6 +42,7 @@ id: Tabs.Panel
 **/
 @withStyleNew(generateStyle)
 class Panel extends Component<TabsPanelProps> {
+  static displayName = 'Panel'
   static readonly componentId = 'Tabs.Panel'
 
   static allowedProps = allowedProps