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

package/lib/Alert/v2/index.js

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Alert = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _keycode = _interopRequireDefault(require("keycode"));
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _latest = require("@instructure/ui-buttons/latest");
+var _latest2 = require("@instructure/ui-view/latest");
+var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _uiIcons = require("@instructure/ui-icons");
+var _Transition = require("@instructure/ui-motion/lib/Transition");
+var _console = require("@instructure/console");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["margin", "styles", "children", "onDismiss", "variantScreenReaderLabel"];
+var _dec, _dec2, _class, _Alert;
+/*
+ * 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
+---
+**/
+let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Alert = class Alert extends _react.Component {
+  constructor(props) {
+    super(props);
+    this._timeouts = [];
+    this.srid = void 0;
+    this.variantUI = {
+      error: _uiIcons.XCircleInstUIIcon,
+      info: _uiIcons.InfoInstUIIcon,
+      success: _uiIcons.CircleCheckInstUIIcon,
+      warning: _uiIcons.TriangleAlertInstUIIcon
+    };
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleTimeout = () => {
+      if (this.props.timeout > 0) {
+        this._timeouts.push(setTimeout(() => {
+          this.close();
+        }, this.props.timeout));
+      }
+    };
+    this.onExitTransition = () => {
+      if (this.props.onDismiss) {
+        this.props.onDismiss();
+      }
+    };
+    this.close = () => {
+      this.clearTimeouts();
+      this.removeScreenreaderAlert();
+      this.setState({
+        open: false
+      }, () => {
+        if (this.props.onDismiss && (this.props.transition === 'none' || this.props.screenReaderOnly)) {
+          this.props.onDismiss();
+        }
+      });
+    };
+    this.handleKeyUp = event => {
+      if (this.props.renderCloseButtonLabel && event.keyCode === _keycode.default.codes.esc) {
+        this.close();
+      }
+    };
+    this.srid = this.props.deterministicId();
+    this.state = {
+      open: true
+    };
+  }
+  clearTimeouts() {
+    this._timeouts.forEach(timeout => clearTimeout(timeout));
+    this._timeouts = [];
+  }
+  // duck type for a dom node
+  isDOMNode(n) {
+    return n && typeof n === 'object' && n.nodeType === 1;
+  }
+  getLiveRegion() {
+    const lr = typeof this.props.liveRegion === 'function' ? this.props.liveRegion() : this.props.liveRegion;
+    return this.isDOMNode(lr) ? lr : null;
+  }
+  initLiveRegion(liveRegion) {
+    (0, _console.logError)(liveRegion.getAttribute('role') === 'alert', `[Alert] live region must have role='alert' set on page load in order to announce content`);
+    if (liveRegion) {
+      liveRegion.setAttribute('aria-live', this.props.liveRegionPoliteness);
+      // indicates what notifications the user agent will trigger when the
+      // accessibility tree within a live region is modified.
+      // additions: elements are added, text: Text content is added
+      liveRegion.setAttribute('aria-relevant', 'additions text');
+      liveRegion.setAttribute('aria-atomic', `${this.props.isLiveRegionAtomic}`);
+    }
+  }
+  createScreenreaderContentNode() {
+    return (0, _jsxRuntime.jsxs)(_ScreenReaderContent.ScreenReaderContent, {
+      children: [this.props.variantScreenReaderLabel || '', " ", this.props.children]
+    });
+  }
+  createScreenreaderAlert() {
+    const liveRegion = this.getLiveRegion();
+    if (liveRegion) {
+      const div = document.createElement('div');
+      div.setAttribute('id', this.srid);
+      liveRegion.appendChild(div);
+    }
+  }
+  removeScreenreaderAlert() {
+    const liveRegion = this.getLiveRegion();
+    if (liveRegion) {
+      const div = document.getElementById(this.srid);
+      if (div) {
+        // Accessibility attributes must be removed for the deletion of the node
+        // and then reapplied because JAWS/IE will not respect the
+        // "aria-relevant" attribute and read when the node is deleted if
+        // the attributes are in place
+        liveRegion.removeAttribute('aria-live');
+        liveRegion.removeAttribute('aria-relevant');
+        liveRegion.removeAttribute('aria-atomic');
+        this.initLiveRegion(liveRegion);
+      }
+    }
+  }
+  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);
+    const liveRegion = this.getLiveRegion();
+    if (liveRegion) {
+      this.initLiveRegion(liveRegion);
+    }
+    this.handleTimeout();
+  }
+  componentWillUnmount() {
+    this.clearTimeouts();
+  }
+  componentDidUpdate(prevProps) {
+    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);
+    if (!!this.props.open === false && !!this.props.open !== !!prevProps.open) {
+      // this outside world is asking us to close the alert, which needs to
+      // take place internally so the transition runs
+      this.close();
+    }
+  }
+  renderIcon() {
+    const _this$props3 = this.props,
+      renderCustomIcon = _this$props3.renderCustomIcon,
+      variant = _this$props3.variant,
+      styles = _this$props3.styles;
+    const Icon = this.variantUI[variant];
+    return (0, _jsxRuntime.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.icon,
+      children: renderCustomIcon ? (0, _callRenderProp.callRenderProp)(renderCustomIcon) : (0, _jsxRuntime.jsx)(Icon, {})
+    });
+  }
+  renderCloseButton() {
+    var _this$props$styles;
+    const closeButtonLabel = this.props.renderCloseButtonLabel && (0, _callRenderProp.callRenderProp)(this.props.renderCloseButtonLabel);
+    return closeButtonLabel ? (0, _jsxRuntime.jsx)("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
+      children: (0, _jsxRuntime.jsx)(_latest.CloseButton, {
+        onClick: this.close,
+        size: "small",
+        screenReaderLabel: closeButtonLabel
+      })
+    }, "closeButton") : null;
+  }
+  renderAlert() {
+    // prevent onDismiss from being passed to the View component
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      styles = _this$props4.styles,
+      children = _this$props4.children,
+      onDismiss = _this$props4.onDismiss,
+      variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    return (0, _jsxRuntime.jsxs)(_latest2.View, {
+      ...(0, _passthroughProps.passthroughProps)({
+        ...props
+      }),
+      as: "div",
+      margin: margin,
+      css: styles === null || styles === void 0 ? void 0 : styles.alert,
+      onKeyUp: this.handleKeyUp,
+      elementRef: this.handleRef,
+      children: [this.renderIcon(), (0, _jsxRuntime.jsxs)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.content,
+        children: [variantScreenReaderLabel && (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.variantScreenReaderLabel,
+          children: variantScreenReaderLabel
+        }), children]
+      }), this.renderCloseButton()]
+    });
+  }
+  createScreenReaderPortal(liveRegion) {
+    const open = this.state.open;
+    return open ? /*#__PURE__*/_reactDom.default.createPortal((0, _jsxRuntime.jsx)("div", {
+      id: this.srid,
+      children: this.createScreenreaderContentNode()
+    }), liveRegion) : null;
+  }
+  render() {
+    const liveRegion = this.getLiveRegion();
+    const screenReaderContent = liveRegion ? this.createScreenReaderPortal(liveRegion) : null;
+    // Don't render anything if screen reader only
+    if (this.props.screenReaderOnly) {
+      (0, _console.logError)(!!this.getLiveRegion(), `[Alert] The 'screenReaderOnly' prop must be used in conjunction with 'liveRegion'.`);
+      return screenReaderContent;
+    }
+    if (this.props.transition === 'none') {
+      return this.state.open ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [screenReaderContent, this.renderAlert()]
+      }) : null;
+    }
+    return (0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [screenReaderContent, (0, _jsxRuntime.jsx)(_Transition.Transition, {
+        type: this.props.transition,
+        transitionOnMount: true,
+        in: this.state.open,
+        unmountOnExit: true,
+        onExited: this.onExitTransition,
+        children: this.renderAlert()
+      })]
+    });
+  }
+}, _Alert.displayName = "Alert", _Alert.componentId = 'Alert', _Alert.allowedProps = _props.allowedProps, _Alert.defaultProps = {
+  variant: 'info',
+  margin: 'x-small 0',
+  timeout: 0,
+  transition: 'fade',
+  open: true,
+  screenReaderOnly: false,
+  liveRegionPoliteness: 'assertive',
+  isLiveRegionAtomic: false,
+  children: null,
+  hasShadow: true
+}, _Alert)) || _class) || _class);
+var _default = exports.default = Alert;

package/lib/Alert/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 = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];

package/lib/Alert/v2/styles.js

@@ -0,0 +1,140 @@
+"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} 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) => {
+  const variant = props.variant,
+    hasShadow = props.hasShadow;
+  const variantStyles = {
+    error: {
+      alert: {
+        borderColor: componentTheme.dangerBorderColor
+      },
+      icon: {
+        background: componentTheme.dangerIconBackground,
+        borderRightColor: componentTheme.dangerIconBackground
+      }
+    },
+    info: {
+      alert: {
+        borderColor: componentTheme.infoBorderColor
+      },
+      icon: {
+        background: componentTheme.infoIconBackground,
+        borderRightColor: componentTheme.infoIconBackground
+      }
+    },
+    success: {
+      alert: {
+        borderColor: componentTheme.successBorderColor
+      },
+      icon: {
+        backgroundColor: componentTheme.successIconBackground,
+        borderRightColor: componentTheme.successIconBackground
+      }
+    },
+    warning: {
+      alert: {
+        borderColor: componentTheme.warningBorderColor
+      },
+      icon: {
+        background: componentTheme.warningIconBackground,
+        borderRightColor: componentTheme.warningIconBackground
+      }
+    }
+  };
+  return {
+    alert: {
+      label: 'alert',
+      color: componentTheme.color,
+      background: componentTheme.background,
+      boxSizing: 'border-box',
+      display: 'flex',
+      minWidth: '12rem',
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: componentTheme.borderStyle,
+      borderRadius: componentTheme.borderRadius,
+      ...variantStyles[variant].alert,
+      ...(hasShadow && {
+        boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(sharedTokens.boxShadow.elevation4)
+      })
+    },
+    icon: {
+      color: componentTheme.iconColor,
+      boxSizing: 'border-box',
+      flex: '0 0 2.5rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '1.125rem',
+      borderRight: `${componentTheme.borderWidth} ${componentTheme.borderStyle}`,
+      margin: -1,
+      borderStartStartRadius: componentTheme.borderRadius,
+      borderEndStartRadius: componentTheme.borderRadius,
+      ...variantStyles[variant].icon
+    },
+    closeButton: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      alignItems: 'flex-start',
+      order: 1,
+      marginTop: componentTheme.closeButtonMarginTop,
+      marginRight: componentTheme.closeButtonMarginRight
+    },
+    content: {
+      boxSizing: 'border-box',
+      flex: 1,
+      minWidth: '0.0625rem',
+      fontSize: componentTheme.contentFontSize,
+      fontFamily: componentTheme.contentFontFamily,
+      fontWeight: componentTheme.contentFontWeight,
+      lineHeight: componentTheme.contentLineHeight,
+      padding: `${componentTheme.contentPaddingVertical} ${componentTheme.contentPaddingHorizontal}`
+    },
+    variantScreenReaderLabel: {
+      position: 'absolute',
+      height: '1px',
+      width: '1px',
+      overflow: 'hidden',
+      margin: '-1px'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
   get: function () {
-    return _Alert.Alert;
+    return _v.Alert;
   }
 });
-var _Alert = require("./Alert");
+var _v = require("../Alert/v1");

package/lib/exports/b.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,26 +16,26 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "keycode": "^2",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/console": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-motion": "11.6.0",
-    "@instructure/ui-themes": "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-buttons": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-motion": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "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-scripts": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-scripts": "11.6.1-snapshot-129",
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "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/Alert/{index.tsx → v1/index.tsx}

@@ -31,9 +31,9 @@ import {
   withDeterministicId,
   passthroughProps
 } from '@instructure/ui-react-utils'
-import { CloseButton } from '@instructure/ui-buttons'
-import { View } from '@instructure/ui-view'
-import type { ViewOwnProps } from '@instructure/ui-view'
+import { CloseButton } from '@instructure/ui-buttons/v11_6'
+import { View } from '@instructure/ui-view/v11_6'
+import type { ViewOwnProps } from '@instructure/ui-view/v11_6'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import {
   IconCheckMarkSolid,
@@ -43,7 +43,7 @@ import {
 } from '@instructure/ui-icons'
 import { Transition } from '@instructure/ui-motion'
 import { logError as error } from '@instructure/console'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'