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

package/lib/Modal/v2/ModalFooter/styles.js

@@ -0,0 +1,66 @@
+"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} sharedTokens Shared theme token object
+ * @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 variant = props.variant,
+    spacing = props.spacing;
+  const backgroundStyle = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor,
+    borderTop: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`
+  } : {
+    background: componentTheme.backgroundColor,
+    borderTop: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`
+  };
+  return {
+    modalFooter: {
+      label: 'modalFooter',
+      flex: '0 0 auto',
+      boxSizing: 'border-box',
+      padding: spacing === 'compact' ? componentTheme.paddingCompact : componentTheme.padding,
+      borderBottomRightRadius: componentTheme.borderRadius,
+      borderBottomLeftRadius: componentTheme.borderRadius,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      ...backgroundStyle
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Modal/v2/ModalHeader/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalHeader = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _emotion = require("@instructure/emotion");
+var _latest = require("@instructure/ui-buttons/latest");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _ModalContext = _interopRequireDefault(require("../ModalContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["children"];
+var _dec, _class, _ModalHeader;
+/*
+ * 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: Modal
+id: Modal.Header
+---
+**/
+let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, 'ModalHeader'), _dec(_class = (_ModalHeader = class ModalHeader extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    /**
+     * Gets all text in a DOM subtree, text under <button> nodes is excluded
+     */
+    this.getTextExcludingButtons = root => {
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+          var _node$parentElement;
+          return (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 && _node$parentElement.closest('button') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+        }
+      });
+      let text = '';
+      let current;
+      while (current = walker.nextNode()) {
+        text += current.nodeValue;
+      }
+      return text;
+    };
+    this.handleRef = el => {
+      this.ref = el;
+      if (el) {
+        var _this$context$setBody, _this$context;
+        const txt = this.getTextExcludingButtons(el);
+        (_this$context$setBody = (_this$context = this.context).setBodyScrollAriaLabel) === null || _this$context$setBody === void 0 ? void 0 : _this$context$setBody.call(_this$context, txt);
+      }
+    };
+    this.makeStyleProps = () => {
+      return {
+        withCloseButton: this.usesCloseButton
+      };
+    };
+  }
+  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, this.makeStyleProps());
+  }
+  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, this.makeStyleProps());
+  }
+  get usesCloseButton() {
+    let hasCloseButton = false;
+    _react.Children.forEach(this.props.children, child => {
+      if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_latest.CloseButton])) {
+        hasCloseButton = true;
+      }
+    });
+    return hasCloseButton;
+  }
+  render() {
+    var _this$props$styles;
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    return (0, _jsxRuntime.jsx)("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader,
+      ...(0, _passthroughProps.passthroughProps)(rest),
+      ref: this.handleRef,
+      "data-cid": "ModalHeader",
+      children: children
+    });
+  }
+}, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.allowedProps = _props.allowedProps, _ModalHeader.defaultProps = {
+  variant: 'default',
+  spacing: 'default'
+}, _ModalHeader.contextType = _ModalContext.default, _ModalHeader)) || _class);
+var _default = exports.default = ModalHeader;

package/lib/Modal/v2/ModalHeader/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 = ['children', 'variant', 'spacing'];

package/lib/Modal/v2/ModalHeader/styles.js

@@ -0,0 +1,82 @@
+"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} _sharedTokens Shared theme token object (unused)
+ * @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, _sharedTokens, state) => {
+  const variant = props.variant,
+    spacing = props.spacing;
+  const withCloseButton = state.withCloseButton;
+  const sizeVariants = {
+    default: {
+      padding: componentTheme.padding,
+      paddingInlineStart: componentTheme.padding,
+      paddingInlineEnd: withCloseButton ? `calc(${componentTheme.padding} * 2 + 1em)` : componentTheme.padding
+    },
+    compact: {
+      padding: componentTheme.paddingCompact,
+      paddingInlineStart: componentTheme.paddingCompact,
+      paddingInlineEnd: withCloseButton ? `calc(${componentTheme.paddingCompact} * 2 + 1em)` : componentTheme.paddingCompact
+    }
+  };
+  const inverseStyle = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor,
+    borderBottomColor: componentTheme.inverseBorderColor
+  } : {};
+  return {
+    modalHeader: {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit',
+      label: 'modalHeader',
+      boxSizing: 'border-box',
+      flex: '0 0 auto',
+      background: componentTheme.backgroundColor,
+      borderBottomWidth: componentTheme.borderWidth,
+      borderBottomStyle: 'solid',
+      borderBottomColor: componentTheme.borderColor,
+      ...sizeVariants[spacing],
+      ...inverseStyle,
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -32,13 +32,12 @@ var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFun
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _Portal = require("@instructure/ui-portal/lib/Portal");
 var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
-var _Mask = require("@instructure/ui-overlays/lib/Mask");
+var _latest = require("@instructure/ui-overlays/latest");
 var _ModalHeader = require("./ModalHeader");
 var _ModalBody = require("./ModalBody");
 var _ModalFooter = require("./ModalFooter");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _ModalContext = _interopRequireDefault(require("./ModalContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -73,7 +72,7 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Modal = class Modal extends _react.Component {
+let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Modal = class Modal extends _react.Component {
   constructor(props) {
     var _props$open;
     super(props);
@@ -211,7 +210,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       ,
       children: this.renderChildren()
     });
-    return (0, _jsxRuntime.jsx)(_Mask.Mask, {
+    return (0, _jsxRuntime.jsx)(_latest.Mask, {
       placement: this.maskPlacement,
       fullscreen: constrain === 'window',
       themeOverride: isFullScreen ? {

package/lib/Modal/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 = ['label', 'children', 'as', 'size', 'variant', 'open', 'defaultFocusElement', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'contentRef', 'mountNode', 'insertAt', 'liveRegion', 'transition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'constrain', 'overflow'];

package/lib/Modal/v2/styles.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _uiThemes = require("@instructure/ui-themes");
+/*
+ * 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} sharedTokens Shared theme token object
+ * @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 size = props.size,
+    variant = props.variant,
+    overflow = props.overflow;
+  const commonSizeStyleExceptForFullscreen = {
+    maxWidth: '95%',
+    maxHeight: '95%',
+    ...(overflow === 'fit' && {
+      transform: 'translateY(2.5%)'
+    })
+  };
+  const sizeStyles = {
+    auto: {
+      flex: '0 1 auto',
+      minWidth: componentTheme.autoMinWidth,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    small: {
+      flex: `0 1 ${componentTheme.smallMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    medium: {
+      flex: `0 1 ${componentTheme.mediumMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    large: {
+      flex: `0 1 ${componentTheme.largeMaxWidth}`,
+      ...commonSizeStyleExceptForFullscreen
+    },
+    fullscreen: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+      boxShadow: 'none',
+      border: 'none',
+      borderRadius: 0
+    }
+  };
+  const backgroundStyles = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor,
+    border: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`,
+    color: componentTheme.inverseTextColor
+  } : {
+    background: componentTheme.backgroundColor,
+    border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
+    color: componentTheme.textColor
+  };
+  return {
+    modal: {
+      label: 'modal',
+      fontFamily: componentTheme.fontFamily,
+      display: 'flex',
+      minWidth: '1px',
+      flexDirection: 'column',
+      position: 'relative',
+      boxSizing: 'border-box',
+      boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.boxShadow),
+      borderRadius: componentTheme.borderRadius,
+      overflow: 'hidden',
+      ...sizeStyles[size],
+      ...backgroundStyles
+    },
+    constrainContext: {
+      label: 'modal__constrainContext',
+      display: 'block',
+      position: 'relative',
+      width: '100%',
+      height: '100%'
+    },
+    joinedHeaderAndBody: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flex: '1 1 auto',
+      // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
+      '@media (max-height: 20rem)': {
+        overflowY: 'auto',
+        maxHeight: '20rem'
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,25 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
-    return _Modal.Modal;
+    return _v.Modal;
   }
 });
 Object.defineProperty(exports, "ModalBody", {
   enumerable: true,
   get: function () {
-    return _Modal.ModalBody;
+    return _v.ModalBody;
   }
 });
 Object.defineProperty(exports, "ModalFooter", {
   enumerable: true,
   get: function () {
-    return _Modal.ModalFooter;
+    return _v.ModalFooter;
   }
 });
 Object.defineProperty(exports, "ModalHeader", {
   enumerable: true,
   get: function () {
-    return _Modal.ModalHeader;
+    return _v.ModalHeader;
   }
 });
-var _Modal = require("./Modal");
+var _v = require("../Modal/v1");

package/lib/exports/b.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _v.Modal;
+  }
+});
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function () {
+    return _v.ModalBody;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function () {
+    return _v.ModalFooter;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _v.ModalHeader;
+  }
+});
+var _v = require("../Modal/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,28 +15,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/console": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-dialog": "11.6.0",
-    "@instructure/ui-motion": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-portal": "11.6.0",
-    "@instructure/ui-overlays": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-dialog": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-motion": "11.6.1-snapshot-129",
+    "@instructure/ui-overlays": "11.6.1-snapshot-129",
+    "@instructure/ui-portal": "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-color-utils": "11.6.0",
-    "@instructure/ui-position": "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-position": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -46,17 +46,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/Modal/{ModalBody → v1/ModalBody}/index.tsx

@@ -24,11 +24,11 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { omitProps } from '@instructure/ui-react-utils'
 import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'