@instructure/ui-grid 11.7.4-snapshot-11 → 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-11](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-11) (2026-05-19)
+## [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-grid
 

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/Grid/v1/index.js

@@ -25,12 +25,12 @@ var _dec, _class;
 
 import { Component, Children } from 'react';
 import { safeCloneElement, matchComponentTypes, omitProps, pickProps } from '@instructure/ui-react-utils';
-import { GridRow } from "../../GridRow/v1/index.js";
-import { GridCol } from "../../GridCol/v1/index.js";
+import { GridRow } from '../../GridRow/v1/index.js';
+import { GridCol } from '../../GridCol/v1/index.js';
 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';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -38,7 +38,7 @@ category: components
 ---
 **/
 let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Grid extends Component {
-  static displayName = "Grid";
+  static displayName = 'Grid';
   static componentId = 'Grid';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/Grid/v2/index.js

@@ -25,11 +25,11 @@ var _dec, _class;
 
 import { Component, Children } from 'react';
 import { safeCloneElement, matchComponentTypes, omitProps, pickProps } from '@instructure/ui-react-utils';
-import { GridRow } from "../../GridRow/v2/index.js";
-import { GridCol } from "../../GridCol/v2/index.js";
+import { GridRow } from '../../GridRow/v2/index.js';
+import { GridCol } from '../../GridCol/v2/index.js';
 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';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -37,7 +37,7 @@ category: components
 ---
 **/
 let Grid = (_dec = withStyleNew(generateStyle), _dec(_class = class Grid extends Component {
-  static displayName = "Grid";
+  static displayName = 'Grid';
   static componentId = 'Grid';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/GridCol/v1/index.js

@@ -27,9 +27,9 @@ import { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
 import { withStyle } from '@instructure/emotion';
 import { logWarn as warn } from '@instructure/console';
-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';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -38,7 +38,7 @@ id: Grid.Col
 ---
 **/
 let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class GridCol extends Component {
-  static displayName = "GridCol";
+  static displayName = 'GridCol';
   static componentId = 'Grid.Col';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/GridCol/v2/index.js

@@ -27,8 +27,8 @@ import { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
 import { withStyleNew } from '@instructure/emotion';
 import { logWarn as warn } from '@instructure/console';
-import generateStyle from "./styles.js";
-import { allowedProps } from "./props.js";
+import generateStyle from './styles.js';
+import { allowedProps } from './props.js';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -37,7 +37,7 @@ id: Grid.Col
 ---
 **/
 let GridCol = (_dec = withStyleNew(generateStyle), _dec(_class = class GridCol extends Component {
-  static displayName = "GridCol";
+  static displayName = 'GridCol';
   static componentId = 'Grid.Col';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/GridRow/v1/index.js

@@ -25,11 +25,11 @@ var _dec, _class;
 
 import { Component, Children } from 'react';
 import { safeCloneElement, matchComponentTypes, omitProps, pickProps } from '@instructure/ui-react-utils';
-import { GridCol } from "../../GridCol/v1/index.js";
+import { GridCol } from '../../GridCol/v1/index.js';
 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';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -38,7 +38,7 @@ id: Grid.Row
 ---
 **/
 let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class GridRow extends Component {
-  static displayName = "GridRow";
+  static displayName = 'GridRow';
   static componentId = 'Grid.Row';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/GridRow/v2/index.js

@@ -25,10 +25,10 @@ var _dec, _class;
 
 import { Component, Children } from 'react';
 import { safeCloneElement, matchComponentTypes, omitProps, pickProps } from '@instructure/ui-react-utils';
-import { GridCol } from "../../GridCol/v2/index.js";
+import { GridCol } from '../../GridCol/v2/index.js';
 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';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -37,7 +37,7 @@ id: Grid.Row
 ---
 **/
 let GridRow = (_dec = withStyleNew(generateStyle), _dec(_class = class GridRow extends Component {
-  static displayName = "GridRow";
+  static displayName = 'GridRow';
   static componentId = 'Grid.Row';
   static allowedProps = allowedProps;
   static defaultProps = {

package/es/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 { Grid, GridRow, GridCol } from "../Grid/v1/index.js";
+export { Grid, GridRow, GridCol } from '../Grid/v1/index.js';

package/es/exports/b.js

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

package/lib/Grid/v1/index.js

@@ -8,13 +8,13 @@ exports.Grid = void 0;
 Object.defineProperty(exports, "GridCol", {
   enumerable: true,
   get: function () {
-    return _v2.GridCol;
+    return _index2.GridCol;
   }
 });
 Object.defineProperty(exports, "GridRow", {
   enumerable: true,
   get: function () {
-    return _v.GridRow;
+    return _index.GridRow;
   }
 });
 exports.default = void 0;
@@ -23,12 +23,12 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _v = require("../../GridRow/v1");
-var _v2 = require("../../GridCol/v1");
+var _index = require("../../GridRow/v1/index.js");
+var _index2 = require("../../GridCol/v1/index.js");
 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;
 /*
@@ -60,7 +60,7 @@ category: components
 ---
 **/
 let Grid = exports.Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Grid extends _react.Component {
-  static displayName = "Grid";
+  static displayName = 'Grid';
   static componentId = 'Grid';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
@@ -72,8 +72,8 @@ let Grid = exports.Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     visualDebug: false,
     children: null
   };
-  static Row = _v.GridRow;
-  static Col = _v2.GridCol;
+  static Row = _index.GridRow;
+  static Col = _index2.GridCol;
   ref = null;
   handleRef = el => {
     this.ref = el;
@@ -92,7 +92,7 @@ let Grid = exports.Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     } = this.props;
     const children = _react.Children.toArray(this.props.children);
     return children.map((child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.GridRow])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.GridRow])) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           ...(0, _pickProps.pickProps)(props, Grid.allowedProps),
           ...child.props /* child props should override parent */,

package/lib/Grid/v2/index.js

@@ -8,13 +8,13 @@ exports.Grid = void 0;
 Object.defineProperty(exports, "GridCol", {
   enumerable: true,
   get: function () {
-    return _v2.GridCol;
+    return _index2.GridCol;
   }
 });
 Object.defineProperty(exports, "GridRow", {
   enumerable: true,
   get: function () {
-    return _v.GridRow;
+    return _index.GridRow;
   }
 });
 exports.default = void 0;
@@ -23,11 +23,11 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _v = require("../../GridRow/v2");
-var _v2 = require("../../GridCol/v2");
+var _index = require("../../GridRow/v2/index.js");
+var _index2 = require("../../GridCol/v2/index.js");
 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;
 /*
@@ -59,7 +59,7 @@ category: components
 ---
 **/
 let Grid = exports.Grid = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class Grid extends _react.Component {
-  static displayName = "Grid";
+  static displayName = 'Grid';
   static componentId = 'Grid';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
@@ -71,8 +71,8 @@ let Grid = exports.Grid = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
     visualDebug: false,
     children: null
   };
-  static Row = _v.GridRow;
-  static Col = _v2.GridCol;
+  static Row = _index.GridRow;
+  static Col = _index2.GridCol;
   ref = null;
   handleRef = el => {
     this.ref = el;
@@ -91,7 +91,7 @@ let Grid = exports.Grid = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
     } = this.props;
     const children = _react.Children.toArray(this.props.children);
     return children.map((child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.GridRow])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.GridRow])) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           ...(0, _pickProps.pickProps)(props, Grid.allowedProps),
           ...child.props /* child props should override parent */,

package/lib/GridCol/v1/index.js

@@ -9,9 +9,9 @@ var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _emotion = require("@instructure/emotion");
 var _console = require("@instructure/console");
-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;
 /*
@@ -44,7 +44,7 @@ id: Grid.Col
 ---
 **/
 let GridCol = exports.GridCol = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class GridCol extends _react.Component {
-  static displayName = "GridCol";
+  static displayName = 'GridCol';
   static componentId = 'Grid.Col';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/GridCol/v2/index.js

@@ -9,8 +9,8 @@ var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _emotion = require("@instructure/emotion");
 var _console = require("@instructure/console");
-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;
 /*
@@ -43,7 +43,7 @@ id: Grid.Col
 ---
 **/
 let GridCol = exports.GridCol = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class GridCol extends _react.Component {
-  static displayName = "GridCol";
+  static displayName = 'GridCol';
   static componentId = 'Grid.Col';
   static allowedProps = _props.allowedProps;
   static defaultProps = {

package/lib/GridRow/v1/index.js

@@ -10,11 +10,11 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _v = require("../../GridCol/v1/");
+var _index = require("../../GridCol/v1/index.js");
 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;
 /*
@@ -47,7 +47,7 @@ id: Grid.Row
 ---
 **/
 let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class GridRow extends _react.Component {
-  static displayName = "GridRow";
+  static displayName = 'GridRow';
   static componentId = 'Grid.Row';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
@@ -71,7 +71,7 @@ let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyle)(_styles.default,
       ...props
     } = this.props;
     return _react.Children.map(this.props.children, (child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.GridCol])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.GridCol])) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
           ...child.props /* child props should override parent */,

package/lib/GridRow/v2/index.js

@@ -10,10 +10,10 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _v = require("../../GridCol/v2/");
+var _index = require("../../GridCol/v2/index.js");
 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;
 /*
@@ -46,7 +46,7 @@ id: Grid.Row
 ---
 **/
 let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = class GridRow extends _react.Component {
-  static displayName = "GridRow";
+  static displayName = 'GridRow';
   static componentId = 'Grid.Row';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
@@ -70,7 +70,7 @@ let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyleNew)(_styles.defau
       ...props
     } = this.props;
     return _react.Children.map(this.props.children, (child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.GridCol])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.GridCol])) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
           ...child.props /* child props should override parent */,

package/lib/exports/a.js

@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Grid", {
   enumerable: true,
   get: function () {
-    return _v.Grid;
+    return _index.Grid;
   }
 });
 Object.defineProperty(exports, "GridCol", {
   enumerable: true,
   get: function () {
-    return _v.GridCol;
+    return _index.GridCol;
   }
 });
 Object.defineProperty(exports, "GridRow", {
   enumerable: true,
   get: function () {
-    return _v.GridRow;
+    return _index.GridRow;
   }
 });
-var _v = require("../Grid/v1");
+var _index = require("../Grid/v1/index.js");

package/lib/exports/b.js

@@ -6,19 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Grid", {
   enumerable: true,
   get: function () {
-    return _v.Grid;
+    return _index.Grid;
   }
 });
 Object.defineProperty(exports, "GridCol", {
   enumerable: true,
   get: function () {
-    return _v.GridCol;
+    return _index.GridCol;
   }
 });
 Object.defineProperty(exports, "GridRow", {
   enumerable: true,
   get: function () {
-    return _v.GridRow;
+    return _index.GridRow;
   }
 });
-var _v = require("../Grid/v2");
+var _index = require("../Grid/v2/index.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-grid",
-  "version": "11.7.4-snapshot-11",
+  "version": "11.7.4-snapshot-49",
   "description": "A Grid component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.4-snapshot-11",
-    "@instructure/emotion": "11.7.4-snapshot-11",
-    "@instructure/shared-types": "11.7.4-snapshot-11",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-11",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-11",
-    "@instructure/ui-themes": "11.7.4-snapshot-11",
-    "@instructure/ui-utils": "11.7.4-snapshot-11"
+    "@instructure/console": "11.7.4-snapshot-49",
+    "@instructure/emotion": "11.7.4-snapshot-49",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-49",
+    "@instructure/shared-types": "11.7.4-snapshot-49",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-themes": "11.7.4-snapshot-49",
+    "@instructure/ui-utils": "11.7.4-snapshot-49"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-11",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-11"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-49",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-49"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Grid/v1/index.tsx

@@ -31,16 +31,16 @@ import {
   pickProps
 } from '@instructure/ui-react-utils'
 
-import { GridRow } from '../../GridRow/v1'
+import { GridRow } from '../../GridRow/v1/index.js'
 import type { GridRowProps } from '../../GridRow/v1/props'
-import { GridCol } from '../../GridCol/v1'
+import { GridCol } from '../../GridCol/v1/index.js'
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { GridProps } from './props'
 
 /**
@@ -50,6 +50,7 @@ category: components
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Grid extends Component<GridProps> {
+  static displayName = 'Grid'
   static readonly componentId = 'Grid'
 
   static allowedProps = allowedProps

package/src/Grid/v2/index.tsx

@@ -31,15 +31,15 @@ import {
   pickProps
 } from '@instructure/ui-react-utils'
 
-import { GridRow } from '../../GridRow/v2'
+import { GridRow } from '../../GridRow/v2/index.js'
 import type { GridRowProps } from '../../GridRow/v2/props'
-import { GridCol } from '../../GridCol/v2'
+import { GridCol } from '../../GridCol/v2/index.js'
 
 import { withStyleNew } from '@instructure/emotion'
 
-import generateStyle from './styles'
+import generateStyle from './styles.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { GridProps } from './props'
 
 /**
@@ -49,6 +49,7 @@ category: components
 **/
 @withStyleNew(generateStyle)
 class Grid extends Component<GridProps> {
+  static displayName = 'Grid'
   static readonly componentId = 'Grid'
 
   static allowedProps = allowedProps

package/src/GridCol/v1/index.tsx

@@ -29,10 +29,10 @@ import { omitProps } from '@instructure/ui-react-utils'
 import { withStyle } from '@instructure/emotion'
 import { logWarn as warn } from '@instructure/console'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { GridColProps } from './props'
 
 /**
@@ -43,6 +43,7 @@ id: Grid.Col
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class GridCol extends Component<GridColProps> {
+  static displayName = 'GridCol'
   static readonly componentId = 'Grid.Col'
 
   static allowedProps = allowedProps

package/src/GridCol/v2/index.tsx

@@ -29,9 +29,9 @@ import { omitProps } from '@instructure/ui-react-utils'
 import { withStyleNew } from '@instructure/emotion'
 import { logWarn as warn } from '@instructure/console'
 
-import generateStyle from './styles'
+import generateStyle from './styles.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { GridColProps } from './props'
 
 /**
@@ -42,6 +42,7 @@ id: Grid.Col
 **/
 @withStyleNew(generateStyle)
 class GridCol extends Component<GridColProps> {
+  static displayName = 'GridCol'
   static readonly componentId = 'Grid.Col'
 
   static allowedProps = allowedProps

package/src/GridRow/v1/index.tsx

@@ -31,15 +31,15 @@ import {
   pickProps
 } from '@instructure/ui-react-utils'
 
-import { GridCol } from '../../GridCol/v1/'
+import { GridCol } from '../../GridCol/v1/index.js'
 import type { GridColProps } from '../../GridCol/v1/props'
 
 import { withStyle } from '@instructure/emotion'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { GridRowProps } from './props'
 
 /**
@@ -50,6 +50,7 @@ id: Grid.Row
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class GridRow extends Component<GridRowProps> {
+  static displayName = 'GridRow'
   static readonly componentId = 'Grid.Row'
 
   static allowedProps = allowedProps