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

package/lib/IconButton/{index.js → v1/index.js}

@@ -12,7 +12,7 @@ var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReade
 var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
 var _emotion = require("@instructure/emotion");
 var _theme = _interopRequireDefault(require("./theme"));
-var _BaseButton = require("../BaseButton");
+var _v = require("../../BaseButton/v1");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
@@ -46,7 +46,7 @@ category: components
 ---
 **/
 // needed for listing the available theme variables on docs page
-let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec(_class = (_IconButton = class IconButton extends _react.Component {
+let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyleLegacy)(null, _theme.default), _dec(_class = (_IconButton = class IconButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this._baseButton = null;
@@ -85,7 +85,7 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
       href = _this$props.href,
       props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     const themeOverride = this.props.themeOverride;
-    return (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
+    return (0, _jsxRuntime.jsx)(_v.BaseButton, {
       ...(0, _passthroughProps.passthroughProps)(props),
       type: type,
       size: size,

package/lib/IconButton/{theme.js → v1/theme.js}

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
     return _theme.default;
   }
 });
-var _theme = _interopRequireDefault(require("../BaseButton/theme"));
+var _theme = _interopRequireDefault(require("../../BaseButton/v1/theme"));

package/lib/IconButton/v2/index.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconButton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
+var _emotion = require("@instructure/emotion");
+var _v = require("../../BaseButton/v2");
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
+var _dec, _class, _IconButton;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+// needed for listing the available theme variables on docs page
+let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, 'BaseButton'), _dec(_class = (_IconButton = class IconButton extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this._baseButton = null;
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  get focused() {
+    return this._baseButton && this._baseButton.focused;
+  }
+  focus() {
+    this._baseButton && this._baseButton.focus();
+  }
+  render() {
+    const _this$props = this.props,
+      children = _this$props.children,
+      renderIcon = _this$props.renderIcon,
+      screenReaderLabel = _this$props.screenReaderLabel,
+      type = _this$props.type,
+      size = _this$props.size,
+      elementRef = _this$props.elementRef,
+      as = _this$props.as,
+      interaction = _this$props.interaction,
+      color = _this$props.color,
+      focusColor = _this$props.focusColor,
+      shape = _this$props.shape,
+      withBackground = _this$props.withBackground,
+      withBorder = _this$props.withBorder,
+      margin = _this$props.margin,
+      cursor = _this$props.cursor,
+      href = _this$props.href,
+      props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const themeOverride = this.props.themeOverride;
+    return (0, _jsxRuntime.jsx)(_v.BaseButton, {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      type: type,
+      size: size,
+      elementRef: this.handleRef,
+      as: as,
+      interaction: interaction,
+      color: color,
+      focusColor: focusColor,
+      shape: shape,
+      withBackground: withBackground,
+      withBorder: withBorder,
+      margin: margin,
+      cursor: cursor,
+      href: href,
+      renderIcon: children || renderIcon,
+      themeOverride: themeOverride,
+      ref: component => {
+        this._baseButton = component;
+      },
+      "data-cid": (0, _combineDataCid.combineDataCid)('IconButton', this.props),
+      children: (0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+        children: screenReaderLabel
+      })
+    });
+  }
+}, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  shape: 'rectangle',
+  withBackground: true,
+  withBorder: true,
+  margin: '0',
+  cursor: 'pointer'
+}, _IconButton)) || _class);
+var _default = exports.default = IconButton;

package/lib/IconButton/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'screenReaderLabel', 'shape', 'size', 'type', 'withBackground', 'withBorder', 'onClick'];

package/lib/ToggleButton/{index.js → v1/index.js}

@@ -9,8 +9,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
-var _IconButton = require("../IconButton");
+var _v11_ = require("@instructure/ui-tooltip/v11_6");
+var _v = require("../../IconButton/v1");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
@@ -75,7 +75,7 @@ class ToggleButton extends _react.Component {
       placement = _this$props.placement,
       onClick = _this$props.onClick,
       props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-    return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    return (0, _jsxRuntime.jsx)(_v11_.Tooltip, {
       renderTip: renderTooltipContent,
       on: ['hover', 'focus'],
       placement: placement,
@@ -93,7 +93,7 @@ class ToggleButton extends _react.Component {
       },
       mountNode: mountNode,
       elementRef: el => this.ref = el,
-      children: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+      children: (0, _jsxRuntime.jsx)(_v.IconButton, {
         ...(0, _passthroughProps.passthroughProps)(props),
         screenReaderLabel: screenReaderLabel,
         withBackground: false,

package/lib/ToggleButton/v2/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ToggleButton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _latest = require("@instructure/ui-tooltip/latest");
+var _v = require("../../IconButton/v2");
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+
+class ToggleButton extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.state = {
+      isShowingTooltip: props.isShowingTooltip || false
+    };
+  }
+  get isShowingTooltip() {
+    return typeof this.props.isShowingTooltip === 'undefined' ? this.state.isShowingTooltip : this.props.isShowingTooltip;
+  }
+  render() {
+    const _this$props = this.props,
+      as = _this$props.as,
+      color = _this$props.color,
+      elementRef = _this$props.elementRef,
+      size = _this$props.size,
+      interaction = _this$props.interaction,
+      mountNode = _this$props.mountNode,
+      renderIcon = _this$props.renderIcon,
+      renderTooltipContent = _this$props.renderTooltipContent,
+      screenReaderLabel = _this$props.screenReaderLabel,
+      status = _this$props.status,
+      placement = _this$props.placement,
+      onClick = _this$props.onClick,
+      props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    return (0, _jsxRuntime.jsx)(_latest.Tooltip, {
+      renderTip: renderTooltipContent,
+      on: ['hover', 'focus'],
+      placement: placement,
+      color: color === 'primary-inverse' ? 'primary-inverse' : 'primary',
+      isShowingContent: this.isShowingTooltip,
+      onShowContent: () => {
+        this.setState({
+          isShowingTooltip: true
+        });
+      },
+      onHideContent: () => {
+        this.setState({
+          isShowingTooltip: false
+        });
+      },
+      mountNode: mountNode,
+      elementRef: el => this.ref = el,
+      children: (0, _jsxRuntime.jsx)(_v.IconButton, {
+        ...(0, _passthroughProps.passthroughProps)(props),
+        screenReaderLabel: screenReaderLabel,
+        withBackground: false,
+        withBorder: false,
+        color: color,
+        size: size,
+        elementRef: this.handleRef,
+        as: as,
+        onClick: onClick,
+        interaction: interaction,
+        "aria-pressed": status === 'pressed',
+        "data-cid": "ToggleButton",
+        renderIcon: renderIcon
+      })
+    });
+  }
+}
+exports.ToggleButton = ToggleButton;
+ToggleButton.displayName = "ToggleButton";
+ToggleButton.componentId = 'ToggleButton';
+ToggleButton.allowedProps = _props.allowedProps;
+ToggleButton.defaultProps = {
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  mountNode: null,
+  color: 'secondary',
+  placement: 'top center',
+  constrain: 'window'
+};
+var _default = exports.default = ToggleButton;

package/lib/ToggleButton/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];

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

@@ -6,42 +6,42 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "BaseButton", {
   enumerable: true,
   get: function () {
-    return _BaseButton.BaseButton;
+    return _v.BaseButton;
   }
 });
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
-    return _Button.Button;
+    return _v2.Button;
   }
 });
 Object.defineProperty(exports, "CloseButton", {
   enumerable: true,
   get: function () {
-    return _CloseButton.CloseButton;
+    return _v3.CloseButton;
   }
 });
 Object.defineProperty(exports, "CondensedButton", {
   enumerable: true,
   get: function () {
-    return _CondensedButton.CondensedButton;
+    return _v4.CondensedButton;
   }
 });
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
-    return _IconButton.IconButton;
+    return _v5.IconButton;
   }
 });
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function () {
-    return _ToggleButton.ToggleButton;
+    return _v6.ToggleButton;
   }
 });
-var _BaseButton = require("./BaseButton");
-var _Button = require("./Button");
-var _CloseButton = require("./CloseButton");
-var _CondensedButton = require("./CondensedButton");
-var _IconButton = require("./IconButton");
-var _ToggleButton = require("./ToggleButton");
+var _v = require("../BaseButton/v1");
+var _v2 = require("../Button/v1");
+var _v3 = require("../CloseButton/v1");
+var _v4 = require("../CondensedButton/v1");
+var _v5 = require("../IconButton/v1");
+var _v6 = require("../ToggleButton/v1");

package/lib/exports/b.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseButton", {
+  enumerable: true,
+  get: function () {
+    return _v.BaseButton;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _v2.Button;
+  }
+});
+Object.defineProperty(exports, "CloseButton", {
+  enumerable: true,
+  get: function () {
+    return _v3.CloseButton;
+  }
+});
+Object.defineProperty(exports, "CondensedButton", {
+  enumerable: true,
+  get: function () {
+    return _v4.CondensedButton;
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _v5.IconButton;
+  }
+});
+Object.defineProperty(exports, "ToggleButton", {
+  enumerable: true,
+  get: function () {
+    return _v6.ToggleButton;
+  }
+});
+var _v = require("../BaseButton/v2");
+var _v2 = require("../Button/v2");
+var _v3 = require("../CloseButton/v2");
+var _v4 = require("../CondensedButton/v2");
+var _v5 = require("../IconButton/v2");
+var _v6 = require("../ToggleButton/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,28 +16,28 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "keycode": "^2",
-    "@instructure/console": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-tooltip": "11.6.0",
-    "@instructure/ui-position": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "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-a11y-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-position": "11.6.1-snapshot-129",
+    "@instructure/ui-tooltip": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -47,17 +47,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/BaseButton/{index.tsx → v1/index.tsx}

@@ -33,15 +33,15 @@ import {
 } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
-import { View } from '@instructure/ui-view'
-import type { ViewProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 
 // TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
 // this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
 import { isSafari } from '@instructure/ui-utils'
 import { combineDataCid } from '@instructure/ui-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'

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

@@ -36,7 +36,7 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/shared-types'
-import type { ViewProps } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 import { Renderable } from '@instructure/shared-types'
 
 type BaseButtonOwnProps = {

package/src/BaseButton/v2/README.md

@@ -0,0 +1,15 @@
+---
+describes: BaseButton
+---
+
+`BaseButton` is a low level utility component used to compose Instructure UI buttons. In most cases, it should not be used directly.
+Use [Button](Button), [CloseButton](CloseButton), [IconButton](IconButton), or [CondensedButton](CondensedButton) instead.
+
+```js
+---
+type: example
+---
+<View display="block" margin="medium">
+  <BaseButton>Click me</BaseButton>
+</View>
+```