@instructure/ui-grid 11.6.0 → 11.6.1-snapshot-129

package/lib/GridCol/v2/styles.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const vAlign = props.vAlign,
+    textAlign = props.textAlign,
+    rowSpacing = props.rowSpacing,
+    colSpacing = props.colSpacing,
+    isLastRow = props.isLastRow,
+    isLastCol = props.isLastCol,
+    startAt = props.startAt,
+    visualDebug = props.visualDebug;
+  const rowSpacingVariants = {
+    small: {
+      marginBottom: componentTheme.spacingSmall
+    },
+    medium: {
+      marginBottom: componentTheme.spacingMedium
+    },
+    large: {
+      marginBottom: componentTheme.spacingLarge
+    },
+    none: {
+      marginBottom: 0
+    }
+  };
+  const getStartGridColumnStyle = () => {
+    const colSpacingVariants = {
+      small: {
+        paddingLeft: `calc(${componentTheme.spacingSmall} / 2)`,
+        paddingRight: `calc(${componentTheme.spacingSmall} / 2)`
+      },
+      medium: {
+        paddingLeft: `calc(${componentTheme.spacingMedium} / 2)`,
+        paddingRight: `calc(${componentTheme.spacingMedium} / 2)`
+      },
+      large: {
+        paddingLeft: `calc(${componentTheme.spacingLarge} / 2)`,
+        paddingRight: `calc(${componentTheme.spacingLarge} / 2)`
+      },
+      none: {}
+    };
+    const vAlignVariants = {
+      top: {
+        alignSelf: 'flex-start'
+      },
+      middle: {
+        alignSelf: 'center'
+      },
+      bottom: {
+        alignSelf: 'flex-end'
+      },
+      stretch: {
+        alignSelf: 'stretch'
+      }
+    };
+    const textAlignVariants = {
+      start: {
+        textAlign: 'start'
+      },
+      end: {
+        textAlign: 'end'
+      },
+      center: {
+        textAlign: 'center'
+      },
+      inherit: {
+        textAlign: 'inherit'
+      }
+    };
+    return {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: '0%',
+      marginBottom: 0,
+      boxSizing: 'border-box',
+      ...(colSpacing && colSpacingVariants[colSpacing]),
+      ...(vAlign && vAlignVariants[vAlign]),
+      ...(textAlign && textAlignVariants[textAlign])
+    };
+  };
+  const enabledBreakpoints = () => {
+    const breakpoints = ['small', 'medium', 'large', 'x-large', null];
+    return breakpoints.slice(breakpoints.indexOf(startAt));
+  };
+  const breakpointIsEnabled = breakpoint => {
+    return enabledBreakpoints().includes(breakpoint);
+  };
+  const getColSize = breakpoint => {
+    let width = props.width;
+    if (!width) return;
+    if (width && typeof width === 'object') {
+      width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
+    }
+    return width;
+  };
+  const getColOffset = breakpoint => {
+    let offset = props.offset;
+    if (!offset) return;
+    if (offset && typeof offset === 'object') {
+      offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
+    }
+    return offset;
+  };
+  const getFlexColumnBySize = (size = '1') => {
+    switch (size) {
+      case 'auto':
+        return {
+          flexGrow: 0,
+          flexShrink: 0,
+          flexBasis: 'auto'
+        };
+      case 12:
+        return {
+          flex: '0 0 100%'
+        };
+      default:
+        return {
+          flexGrow: 0,
+          flexShrink: 0,
+          flexBasis: `calc(${size} / 12 * 99.999%)`,
+          maxWidth: `calc(${size} / 12 * 99.999%)`
+        };
+    }
+  };
+  const getColumnOffsetBySize = (size = '1') => {
+    switch (size) {
+      case 'auto':
+      case 12:
+        return {};
+      default:
+        return {
+          marginInlineStart: `calc(${size} / 12 * 99.999%)`,
+          marginInlineEnd: 0
+        };
+    }
+  };
+  const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
+    ...getStartGridColumnStyle()
+  } : {};
+  const getGridColumnsForBreakpoint = breakpoint => {
+    const size = getColSize(breakpoint);
+    const offset = getColOffset(breakpoint);
+    return breakpointIsEnabled(breakpoint) ? {
+      ...(size && getFlexColumnBySize(size)),
+      ...(offset && getColumnOffsetBySize(offset))
+    } : {};
+  };
+  const getBreakpointStyles = breakpoint => ({
+    ...getStartAtVariants(breakpoint),
+    ...getGridColumnsForBreakpoint(breakpoint)
+  });
+  return {
+    gridCol: {
+      label: 'gridCol',
+      display: 'block',
+      boxSizing: 'border-box',
+      textAlign: 'inherit',
+      minWidth: '0.0625rem',
+      ...(rowSpacing && rowSpacingVariants[rowSpacing]),
+      ...(isLastRow && isLastCol && {
+        marginBottom: 0
+      }),
+      ...getBreakpointStyles('small'),
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
+        ...getBreakpointStyles('medium')
+      },
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
+        ...getBreakpointStyles('large')
+      },
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
+        ...getBreakpointStyles('x-large')
+      },
+      ...(visualDebug && {
+        outline: '0.0625rem dashed red'
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/GridRow/v1/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GridRow = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+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 _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["styles", "makeStyles"],
+  _excluded2 = ["styles"];
+var _dec, _class, _GridRow;
+/*
+ * 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.
+ */
+/**
+---
+parent: Grid
+id: Grid.Row
+---
+**/
+let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_GridRow = class GridRow extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderChildren() {
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      makeStyles = _this$props3.makeStyles,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    return _react.Children.map(this.props.children, (child, index) => {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.GridCol])) {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
+          ...child.props /* child props should override parent */,
+          isLastRow: props.isLastRow,
+          isLastCol: index + 1 === _react.Children.count(this.props.children)
+        });
+      } else {
+        return child; // PropType validation should handle errors
+      }
+    });
+  }
+  render() {
+    const _this$props4 = this.props,
+      styles = _this$props4.styles,
+      restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
+    const props = (0, _omitProps.omitProps)(restProps, GridRow.allowedProps);
+    return (0, _jsxRuntime.jsx)("span", {
+      ...props,
+      css: styles === null || styles === void 0 ? void 0 : styles.gridRow,
+      ref: this.handleRef,
+      children: this.renderChildren()
+    });
+  }
+}, _GridRow.displayName = "GridRow", _GridRow.componentId = 'Grid.Row', _GridRow.allowedProps = _props.allowedProps, _GridRow.defaultProps = {
+  children: null,
+  isLastRow: false
+}, _GridRow)) || _class);
+var _default = exports.default = GridRow;

package/lib/GridRow/{index.js → v2/index.js}

@@ -11,10 +11,9 @@ 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 _GridCol = require("../GridCol");
+var _v = require("../../GridCol/v2/");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["styles", "makeStyles"],
@@ -49,7 +48,7 @@ parent: Grid
 id: Grid.Row
 ---
 **/
-let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_GridRow = class GridRow extends _react.Component {
+let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_GridRow = class GridRow extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -71,7 +70,7 @@ let GridRow = exports.GridRow = (_dec = (0, _emotion.withStyle)(_styles.default,
       makeStyles = _this$props3.makeStyles,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return _react.Children.map(this.props.children, (child, index) => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_GridCol.GridCol])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_v.GridCol])) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
           ...child.props /* child props should override parent */,

package/{src/index.ts → lib/GridRow/v2/props.js}

@@ -1,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -21,10 +27,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Grid, GridRow, GridCol } from './Grid'
-
-export type { GridBreakpoints } from './GridTypes'
 
-export type { GridProps } from './Grid/props'
-export type { GridRowProps } from './GridRow/props'
-export type { GridColProps } from './GridCol/props'
+const allowedProps = exports.allowedProps = ['children', 'rowSpacing', 'colSpacing', 'hAlign', 'vAlign', 'startAt', 'visualDebug', 'isLastRow'];

package/lib/GridRow/v2/styles.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const hAlign = props.hAlign,
+    vAlign = props.vAlign,
+    rowSpacing = props.rowSpacing,
+    colSpacing = props.colSpacing,
+    isLastRow = props.isLastRow,
+    startAt = props.startAt,
+    visualDebug = props.visualDebug;
+  const getGridRowStyle = () => {
+    const hAlignVariants = {
+      center: {
+        justifyContent: 'center'
+      },
+      start: {
+        justifyContent: 'flex-start'
+      },
+      end: {
+        justifyContent: 'flex-end'
+      },
+      'space-around': {
+        justifyContent: 'space-around'
+      },
+      'space-between': {
+        justifyContent: 'space-between'
+      }
+    };
+    const vAlignVariants = {
+      top: {
+        alignItems: 'flex-start'
+      },
+      middle: {
+        alignItems: 'center'
+      },
+      bottom: {
+        alignItems: 'flex-end'
+      },
+      stretch: {
+        alignItems: 'stretch'
+      }
+    };
+    const colSpacingVariants = {
+      small: {
+        margin: `0 calc(-1 * ${componentTheme.spacingSmall} / 2)`
+      },
+      medium: {
+        margin: `0 calc(-1 * ${componentTheme.spacingMedium} / 2)`
+      },
+      large: {
+        margin: `0 calc(-1 * ${componentTheme.spacingLarge} / 2)`
+      },
+      none: {}
+    };
+    const rowSpacingVariants = {
+      small: {
+        marginBottom: componentTheme.spacingSmall
+      },
+      medium: {
+        marginBottom: componentTheme.spacingMedium
+      },
+      large: {
+        marginBottom: componentTheme.spacingLarge
+      },
+      none: {
+        marginBottom: 0
+      }
+    };
+    return {
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      ...(hAlign && hAlignVariants[hAlign]),
+      ...(vAlign && vAlignVariants[vAlign]),
+      ...(colSpacing && colSpacingVariants[colSpacing]),
+      ...(rowSpacing && rowSpacingVariants[rowSpacing]),
+      ...(isLastRow && {
+        marginBottom: 0
+      })
+    };
+  };
+  const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
+    ...getGridRowStyle()
+  } : {};
+  return {
+    gridRow: {
+      label: 'gridRow',
+      display: 'block',
+      boxSizing: 'border-box',
+      ...getStartAtVariants('small'),
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
+        ...getStartAtVariants('medium')
+      },
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
+        ...getStartAtVariants('large')
+      },
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
+        ...getStartAtVariants('x-large')
+      },
+      ...(visualDebug && {
+        outline: '0.0625rem dashed blue'
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

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

package/lib/exports/b.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-grid",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "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.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -38,17 +38,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/Grid/{index.tsx → v1/index.tsx}

@@ -31,11 +31,11 @@ import {
   pickProps
 } from '@instructure/ui-react-utils'
 
-import { GridRow } from '../GridRow'
-import type { GridRowProps } from '../GridRow/props'
-import { GridCol } from '../GridCol'
+import { GridRow } from '../../GridRow/v1'
+import type { GridRowProps } from '../../GridRow/v1/props'
+import { GridCol } from '../../GridCol/v1'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Grid/{props.ts → v1/props.ts}

@@ -24,7 +24,7 @@
 
 import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { GridBreakpoints } from '../GridTypes'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 
 type GridOwnProps = {
   /**

package/src/Grid/{styles.ts → v1/styles.ts}

@@ -23,7 +23,7 @@
  */
 
 import type { GridTheme } from '@instructure/shared-types'
-import type { GridBreakpoints } from '../GridTypes'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 import type { GridProps, GridStyle } from './props'
 
 /**