@instructure/ui-view 11.6.0 → 11.6.1-pr-snapshot-1779894247159

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.6.1-pr-snapshot-1779894247159](https://github.com/instructure/instructure-ui/compare/v11.6.0...v11.6.1-pr-snapshot-1779894247159) (2026-05-27)
+
+**Note:** Version bump only for package @instructure/ui-view
+
+
+
+
+
 # [11.6.0](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.6.0) (2026-02-18)
 
 **Note:** Version bump only for package @instructure/ui-view

package/{lib/ContextView/props.js → babel.config.cjs}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allowedProps = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -28,4 +22,16 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug', 'borderColor'];
+module.exports = {
+  presets: [
+    [
+      require('@instructure/ui-babel-preset'),
+      {
+        coverage: Boolean(process.env.COVERAGE),
+        esModules: Boolean(process.env.ES_MODULES),
+        removeConsole: process.env.NODE_ENV === 'production',
+        transformImports: Boolean(process.env.TRANSFORM_IMPORTS)
+      }
+    ]
+  ]
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@instructure/ui-view",
-  "version": "11.6.0",
+  "version": "11.6.1-pr-snapshot-1779894247159",
+  "type": "module",
   "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
-  "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "repository": {
     "type": "git",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-position": "11.6.0",
-    "@instructure/ui-i18n": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0"
+    "@instructure/console": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/emotion": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/shared-types": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-color-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-dom-utils": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-i18n": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-position": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-react-utils": "11.6.1-pr-snapshot-1779894247159"
   },
   "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-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-babel-preset": "11.6.1-pr-snapshot-1779894247159",
+    "@instructure/ui-themes": "11.6.1-pr-snapshot-1779894247159"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,10 +43,8 @@
     ".": {
       "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",
@@ -56,7 +54,7 @@
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",
     "clean": "ui-scripts clean",
-    "build": "ui-scripts build --modules es,cjs",
+    "build": "ui-scripts build",
     "build:watch": "pnpm run ts:check -- --watch & ui-scripts build --watch",
     "build:types": "tsc -p tsconfig.build.json",
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"

package/lib/ContextView/index.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ContextView = void 0;
-var _react = require("react");
-var _emotion = require("@instructure/emotion");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _View = require("../View");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _ContextView;
-/*
- * 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 ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_ContextView = class ContextView extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(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);
-  }
-  render() {
-    const _this$props3 = this.props,
-      as = _this$props3.as,
-      background = _this$props3.background,
-      children = _this$props3.children,
-      debug = _this$props3.debug,
-      height = _this$props3.height,
-      width = _this$props3.width,
-      maxHeight = _this$props3.maxHeight,
-      maxWidth = _this$props3.maxWidth,
-      minHeight = _this$props3.minHeight,
-      minWidth = _this$props3.minWidth,
-      margin = _this$props3.margin,
-      padding = _this$props3.padding,
-      shadow = _this$props3.shadow,
-      stacking = _this$props3.stacking,
-      style = _this$props3.style,
-      textAlign = _this$props3.textAlign,
-      styles = _this$props3.styles,
-      borderColor = _this$props3.borderColor;
-    return (0, _jsxRuntime.jsx)(_View.View, {
-      ...(0, _omitProps.omitProps)(this.props, ContextView.allowedProps),
-      css: styles === null || styles === void 0 ? void 0 : styles.contextView,
-      style: style,
-      borderWidth: "none",
-      display: "inline-block",
-      as: as,
-      withVisualDebug: debug,
-      elementRef: this.handleRef,
-      margin: margin,
-      stacking: stacking,
-      children: (0, _jsxRuntime.jsxs)(_View.View, {
-        css: styles === null || styles === void 0 ? void 0 : styles.contextView__content,
-        display: "block",
-        borderRadius: "medium",
-        borderWidth: "small",
-        borderColor: borderColor || (background === 'default' ? 'primary' : 'transparent'),
-        background: background === 'default' ? 'primary' : 'primary-inverse',
-        withVisualDebug: debug,
-        height: height,
-        width: width,
-        maxHeight: maxHeight,
-        maxWidth: maxWidth,
-        minHeight: minHeight,
-        minWidth: minWidth,
-        padding: padding,
-        shadow: shadow,
-        textAlign: textAlign,
-        children: [(0, _jsxRuntime.jsx)("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.contextView__arrow
-        }), children]
-      })
-    });
-  }
-}, _ContextView.displayName = "ContextView", _ContextView.componentId = 'ContextView', _ContextView.allowedProps = _props.allowedProps, _ContextView.defaultProps = {
-  as: 'span',
-  elementRef: () => {},
-  debug: false,
-  width: 'auto',
-  height: 'auto',
-  children: null,
-  textAlign: 'start',
-  background: 'default',
-  shadow: 'resting',
-  placement: 'center end'
-}, _ContextView)) || _class);
-var _default = exports.default = ContextView;

package/lib/ContextView/styles.js

@@ -1,262 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _mirrorPlacement = require("@instructure/ui-position/lib/mirrorPlacement.js");
-/*
- * 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 endPlacements = ['end center', 'end top', 'end bottom', 'end stretch', 'center end', 'end'];
-const startPlacements = ['start center', 'start top', 'start bottom', 'start stretch', 'center start', 'start'];
-const bottomPlacements = ['bottom', 'bottom end', 'bottom start', 'bottom stretch', 'bottom center'];
-const topPlacements = ['top', 'top start', 'top end', 'top stretch', 'top center'];
-const getPlacementStyle = (placement, theme) => {
-  if (endPlacements.includes(placement)) {
-    return {
-      paddingInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
-      paddingInlineEnd: '0'
-    };
-  }
-  if (startPlacements.includes(placement)) {
-    return {
-      paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
-      paddingInlineStart: '0'
-    };
-  }
-  if (bottomPlacements.includes(placement)) {
-    return {
-      paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
-    };
-  }
-  if (topPlacements.includes(placement)) {
-    return {
-      paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
-    };
-  }
-  return {
-    position: 'absolute',
-    left: '-999em'
-  };
-};
-const getArrowCorrections = (placement, theme) => {
-  const center = ['top', 'bottom', 'top center', 'bottom center', 'top stretch', 'bottom stretch'];
-  const start = ['top start', 'bottom start'];
-  const end = ['top end', 'bottom end'];
-  const top = ['start top', 'end top'];
-  const bottom = ['start bottom', 'end bottom'];
-  if (center.includes(placement)) {
-    return {
-      insetInlineStart: '50%'
-    };
-  }
-  if (start.includes(placement)) {
-    return {
-      insetInlineStart: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
-      insetInlineEnd: 'auto'
-    };
-  }
-  if (end.includes(placement)) {
-    return {
-      insetInlineStart: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`,
-      insetInlineEnd: 'auto'
-    };
-  }
-  if (top.includes(placement)) {
-    return {
-      top: `calc((${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
-    };
-  }
-  if (bottom.includes(placement)) {
-    return {
-      top: `calc(100% - (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}) * 2)`
-    };
-  }
-  return {};
-};
-const getArrowPlacementVariant = (placement, background, theme, props) => {
-  const transformedPlacement = (0, _mirrorPlacement.mirrorPlacement)(placement, ' ');
-  const isInversed = background === 'inverse';
-  const borderColor = props.borderColor;
-  if (endPlacements.includes(transformedPlacement)) {
-    return {
-      main: {
-        top: '50%',
-        insetInlineStart: '100%',
-        insetInlineEnd: 'auto',
-        marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
-        borderInlineEndWidth: '0',
-        borderInlineEndColor: 'transparent',
-        borderInlineStartColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-        borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
-      },
-      __after: {
-        insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
-        insetInlineStart: 'auto',
-        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
-        borderInlineEndWidth: '0',
-        borderInlineEndColor: 'transparent',
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-        borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
-        borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
-      }
-    };
-  }
-  if (startPlacements.includes(transformedPlacement)) {
-    return {
-      main: {
-        top: '50%',
-        insetInlineEnd: '100%',
-        insetInlineStart: 'auto',
-        marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
-        borderInlineStartWidth: '0',
-        borderInlineStartColor: 'transparent',
-        borderInlineEndColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-        borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
-      },
-      __after: {
-        insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
-        insetInlineEnd: 'auto',
-        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
-        borderInlineStartWidth: '0',
-        borderInlineStartColor: 'transparent',
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-        borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
-        borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
-      }
-    };
-  }
-  if (bottomPlacements.includes(transformedPlacement)) {
-    return {
-      main: {
-        top: '100%',
-        marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
-        marginInlineEnd: '0',
-        borderBottomWidth: '0',
-        borderBottomColor: 'transparent',
-        borderInlineStartColor: 'transparent',
-        borderInlineEndColor: 'transparent'
-      },
-      __after: {
-        bottom: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
-        marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
-        marginInlineEnd: '0',
-        borderBottomWidth: '0',
-        borderBottomColor: 'transparent',
-        borderInlineStartColor: 'transparent',
-        borderInlineEndColor: 'transparent',
-        borderTopColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
-      }
-    };
-  }
-  return {
-    main: {
-      bottom: '100%',
-      marginInlineStart: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
-      marginInlineEnd: '0',
-      borderTopWidth: '0',
-      borderTopColor: 'transparent',
-      borderInlineStartColor: 'transparent',
-      borderInlineEndColor: 'transparent'
-    },
-    __after: {
-      top: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
-      marginInlineStart: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
-      marginInlineEnd: '0',
-      borderTopWidth: '0',
-      borderTopColor: 'transparent',
-      borderInlineStartColor: 'transparent',
-      borderInlineEndColor: 'transparent',
-      borderBottomColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBackgroundColor
-    }
-  };
-};
-
-/**
- * ---
- * 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 placement = props.placement,
-    background = props.background,
-    borderColor = props.borderColor;
-  const arrowBaseStyles = {
-    content: '""',
-    height: '0',
-    width: '0',
-    position: 'absolute',
-    display: 'block',
-    boxSizing: 'border-box',
-    pointerEvents: 'none',
-    borderStyle: 'solid'
-  };
-  const arrowBackGroundVariants = {
-    default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
-    inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
-  };
-  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme, props);
-  return {
-    contextView: {
-      label: 'contextView',
-      boxSizing: 'border-box',
-      minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
-      ...getPlacementStyle(placement, componentTheme)
-    },
-    contextView__content: {
-      label: 'contextView__content',
-      position: 'relative'
-    },
-    contextView__arrow: {
-      label: 'contextView__arrow',
-      ...arrowBaseStyles,
-      display: 'block',
-      borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
-      borderColor: borderColor || arrowBackGroundVariants[background],
-      ...arrowPlacementVariant.main,
-      ...getArrowCorrections(placement, componentTheme),
-      '&::after': {
-        borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
-        borderColor: arrowBackGroundVariants[background],
-        ...arrowPlacementVariant.__after,
-        ...arrowBaseStyles
-      }
-    },
-    arrowSize: componentTheme.arrowSize,
-    arrowBorderWidth: componentTheme.arrowBorderWidth
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/ContextView/theme.js

@@ -1,50 +0,0 @@
-"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.
- */
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = theme => {
-  var _theme$borders, _theme$colors, _theme$colors$contras, _theme$colors2, _theme$colors2$contra, _theme$colors3, _theme$colors3$contra;
-  const componentVariables = {
-    arrowSize: '0.5rem',
-    arrowBorderWidth: theme === null || theme === void 0 ? void 0 : (_theme$borders = theme.borders) === null || _theme$borders === void 0 ? void 0 : _theme$borders.widthSmall,
-    arrowBackgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : (_theme$colors$contras = _theme$colors.contrasts) === null || _theme$colors$contras === void 0 ? void 0 : _theme$colors$contras.white1010,
-    arrowBorderColor: theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : (_theme$colors2$contra = _theme$colors2.contrasts) === null || _theme$colors2$contra === void 0 ? void 0 : _theme$colors2$contra.grey1424,
-    arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : (_theme$colors3$contra = _theme$colors3.contrasts) === null || _theme$colors3$contra === void 0 ? void 0 : _theme$colors3$contra.grey125125,
-    arrowBorderColorInverse: 'transparent'
-  };
-  return {
-    ...componentVariables
-  };
-};
-var _default = exports.default = generateComponentTheme;

package/lib/View/index.js

@@ -1,176 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.View = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
-var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
-var _console = require("@instructure/console");
-var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-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 = ["children", "textAlign", "background", "display", "withVisualDebug", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "overflowX", "overflowY", "stacking", "shadow", "position", "focusPosition", "focusColor", "shouldAnimateFocus", "borderColor", "className", "overscrollBehavior", "styles", "makeStyles"];
-var _dec, _dec2, _class, _View;
-/*
- * 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
----
-@module View
-**/
-let View = exports.View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_View = class View extends _react.Component {
-  get _element() {
-    return this.ref;
-  }
-  constructor(props) {
-    super(props);
-    this.spanMarginVerified = void 0;
-    this.ref = null;
-    this.handleElementRef = el => {
-      if (typeof this.props.elementRef === 'function') {
-        this.props.elementRef(el);
-      }
-      this.ref = el;
-    };
-    this.spanMarginVerified = false;
-  }
-  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);
-
-    // Not calling getCSSStyleDeclaration can save hundreds of ms in tests and production
-    if (process.env.NODE_ENV === 'development' && !this.spanMarginVerified) {
-      // We have to verify margins in the first 'componentDidUpdate',
-      // because that is when all styles are calculated,
-      // but we only want to check once, using a flag
-      this.spanMarginVerified = true;
-      (0, _console.logError)(!function verifySpanMargin(element, margin, _getCSSStyleDeclarati) {
-        if (!element) {
-          return;
-        }
-        const display = (_getCSSStyleDeclarati = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(element)) === null || _getCSSStyleDeclarati === void 0 ? void 0 : _getCSSStyleDeclarati.display;
-        if (display !== 'inline') {
-          return;
-        }
-        const marginValues = margin ? margin.split(' ') : null;
-        let verticalMargin = false;
-
-        // either top or bottom margin are set
-        if (margin) {
-          if (marginValues && marginValues[0] && marginValues[0] !== 'none' && marginValues[0] !== '0') {
-            verticalMargin = true;
-          }
-          if (marginValues && marginValues[2] && marginValues[2] !== 'none' && marginValues[2] !== '0') {
-            verticalMargin = true;
-          }
-        }
-        return verticalMargin;
-      }(this.ref, this.props.margin), `[View] display style is set to 'inline' and will allow for horizontal margins only.`);
-    }
-  }
-  render() {
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      textAlign = _this$props3.textAlign,
-      background = _this$props3.background,
-      display = _this$props3.display,
-      withVisualDebug = _this$props3.withVisualDebug,
-      width = _this$props3.width,
-      height = _this$props3.height,
-      minWidth = _this$props3.minWidth,
-      minHeight = _this$props3.minHeight,
-      maxWidth = _this$props3.maxWidth,
-      maxHeight = _this$props3.maxHeight,
-      overflowX = _this$props3.overflowX,
-      overflowY = _this$props3.overflowY,
-      stacking = _this$props3.stacking,
-      shadow = _this$props3.shadow,
-      position = _this$props3.position,
-      focusPosition = _this$props3.focusPosition,
-      focusColor = _this$props3.focusColor,
-      shouldAnimateFocus = _this$props3.shouldAnimateFocus,
-      borderColor = _this$props3.borderColor,
-      className = _this$props3.className,
-      overscrollBehavior = _this$props3.overscrollBehavior,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const ElementType = (0, _getElementType.getElementType)(View, this.props);
-    return (0, _jsxRuntime.jsx)(ElementType, {
-      ...(0, _passthroughProps.passthroughProps)(props),
-      className: className,
-      css: [styles === null || styles === void 0 ? void 0 : styles.view, styles === null || styles === void 0 ? void 0 : styles.inlineStyles],
-      ref: this.handleElementRef,
-      children: children
-    });
-  }
-}, _View.displayName = "View", _View.componentId = 'View', _View.allowedProps = _props.allowedProps, _View.defaultProps = {
-  display: 'auto',
-  overflowX: 'visible',
-  overflowY: 'visible',
-  withVisualDebug: false,
-  borderColor: 'primary',
-  position: 'static',
-  focusPosition: 'offset',
-  focusColor: 'info',
-  shouldAnimateFocus: true,
-  overscrollBehavior: 'auto'
-}, _View.omitViewProps = (props, Component) => {
-  // We don't want the theming and styling props to pass
-  // (these are added and handled by the `@withStyle` decorator)
-  const propsToOmit = [..._View.allowedProps, 'styles', 'makeStyles', 'themeOverride'];
-  let shouldLogError = true;
-  try {
-    shouldLogError = process.env.NODE_ENV !== 'production';
-  } catch (e) {
-    if (e instanceof ReferenceError) {
-      // if process is not available a ReferenceError is thrown
-      shouldLogError = false;
-    } else {
-      throw e;
-    }
-  }
-  if (shouldLogError) {
-    Object.keys((0, _pickProps.pickProps)(props, propsToOmit)).forEach(prop => {
-      (0, _console.logError)(false, `[${Component.name}] prop '${prop}' is not allowed.`);
-    });
-  }
-  return (0, _omitProps.omitProps)(props, propsToOmit);
-}, _View)) || _class) || _class);
-var _default = exports.default = View;

package/lib/View/props.js

@@ -1,34 +0,0 @@
-"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.
- */
-
-// This variable will be attached as static property on the `View` component
-// so we don't rely on the `PropTypes` validators for our internal logic.
-// This means on prod builds the consuming applications can safely delete propTypes.
-const allowedProps = exports.allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'overscrollBehavior', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug', 'focusRingBorderRadius', 'focusWithin'];

package/lib/View/styles.js

@@ -1,417 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _uiI18n = require("@instructure/ui-i18n");
-var _emotion = require("@instructure/emotion");
-var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
-/*
- * 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 getBorderStyle = ({
-  borderRadius,
-  borderWidth,
-  dir,
-  theme
-}) => {
-  const isRtlDirection = dir === _uiI18n.DIRECTION.rtl;
-  return {
-    borderRadius: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandCorners)(borderRadius) : borderRadius, 'borderRadius', true),
-    borderWidth: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandEdges)(borderWidth) : borderWidth, 'borderWidth')
-  };
-};
-const getSpacingStyle = ({
-  margin,
-  padding,
-  dir,
-  theme
-}) => {
-  const isRtlDirection = dir === _uiI18n.DIRECTION.rtl;
-  return {
-    margin: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandEdges)(margin) : margin, 'margin'),
-    padding: (0, _emotion.getShorthandPropValue)('View', theme, isRtlDirection ? (0, _emotion.mirrorShorthandEdges)(padding) : padding, 'padding')
-  };
-};
-const getOffsetStyle = ({
-  insetBlockStart,
-  insetBlockEnd,
-  insetInlineStart,
-  insetInlineEnd,
-  dir
-}) => {
-  const isRtlDirection = dir === _uiI18n.DIRECTION.rtl;
-  const blockStart = {
-    top: insetBlockStart,
-    insetBlockStart
-  };
-  const blockEnd = {
-    bottom: insetBlockEnd,
-    insetBlockEnd
-  };
-  const horizontalOffsets = {
-    left: isRtlDirection ? insetInlineEnd : insetInlineStart,
-    right: isRtlDirection ? insetInlineStart : insetInlineEnd
-  };
-  return {
-    ...blockStart,
-    ...blockEnd,
-    ...horizontalOffsets
-  };
-};
-const getStyleProps = ({
-  cursor,
-  style
-}) => {
-  const whitelisted = (0, _pickProps.pickProps)(style || {}, {}, [
-  // Position/calculateElementPosition:
-  'top', 'left', 'position', 'display', 'transform', 'overflow', 'minWidth', 'minHeight',
-  // Img:
-  'filter',
-  // Flex.Item:
-  'flexBasis',
-  // Avatar:
-  'backgroundImage',
-  // Popover:
-  'pointerEvents']);
-  if (cursor) {
-    whitelisted.cursor = cursor;
-  }
-  return whitelisted;
-};
-const withBorder = props => {
-  const borderWidth = props.borderWidth;
-  return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
-};
-const getFocusStyles = (props, componentTheme) => {
-  const focusColor = props.focusColor,
-    focusPosition = props.focusPosition,
-    shouldAnimateFocus = props.shouldAnimateFocus,
-    withFocusOutline = props.withFocusOutline,
-    focusWithin = props.focusWithin;
-  const focusPos = focusPosition == 'offset' || focusPosition == 'inset' ? focusPosition : 'offset';
-  const focusPositionVariants = {
-    offset: {
-      outlineOffset: `calc(${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth})`
-    },
-    inset: {
-      outlineOffset: `calc(${componentTheme.focusOutlineInset} - ${componentTheme.focusOutlineWidth})`
-    }
-  };
-  const focusColorVariants = {
-    info: componentTheme.focusColorInfo,
-    inverse: componentTheme.focusColorInverse,
-    success: componentTheme.focusColorSuccess,
-    danger: componentTheme.focusColorDanger
-  };
-  const visibleFocusStyle = {
-    ...focusPositionVariants[focusPos],
-    outlineColor: focusColorVariants[focusColor]
-  };
-  const outlineStyle = {
-    outlineOffset: '-0.8rem',
-    // value when not in focus, its invisible
-    outlineColor: (0, _alpha.alpha)(focusColorVariants[focusColor], 0),
-    outlineStyle: componentTheme.focusOutlineStyle,
-    outlineWidth: componentTheme.focusOutlineWidth,
-    ...(withFocusOutline && visibleFocusStyle)
-  };
-  return {
-    ...(shouldAnimateFocus && {
-      transition: 'outline-color 0.2s, outline-offset 0.25s'
-    }),
-    ...outlineStyle,
-    '&:hover, &:active': {
-      // apply the same style so it's not overridden by some global style
-      ...outlineStyle
-    },
-    ...(typeof withFocusOutline === 'undefined' && {
-      // user focuses the element
-      '&:focus': visibleFocusStyle
-    }),
-    ...(focusWithin && {
-      '&:focus-within': visibleFocusStyle
-    })
-  };
-};
-
-/**
- * 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
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props) => {
-  const borderRadius = props.borderRadius,
-    borderWidth = props.borderWidth,
-    margin = props.margin,
-    padding = props.padding,
-    position = props.position,
-    display = props.display,
-    textAlign = props.textAlign,
-    borderColor = props.borderColor,
-    background = props.background,
-    stacking = props.stacking,
-    shadow = props.shadow,
-    overflowY = props.overflowY,
-    overflowX = props.overflowX,
-    overscrollBehavior = props.overscrollBehavior,
-    insetBlockEnd = props.insetBlockEnd,
-    insetBlockStart = props.insetBlockStart,
-    insetInlineEnd = props.insetInlineEnd,
-    insetInlineStart = props.insetInlineStart,
-    width = props.width,
-    height = props.height,
-    minWidth = props.minWidth,
-    minHeight = props.minHeight,
-    maxWidth = props.maxWidth,
-    maxHeight = props.maxHeight,
-    withVisualDebug = props.withVisualDebug,
-    dir = props.dir;
-  const borderStyle = getBorderStyle({
-    theme: componentTheme,
-    borderRadius,
-    borderWidth,
-    dir
-  });
-  const spacingStyle = getSpacingStyle({
-    margin,
-    padding,
-    theme: componentTheme,
-    dir
-  });
-  const offsetStyle = getOffsetStyle({
-    dir,
-    insetBlockEnd,
-    insetBlockStart,
-    insetInlineEnd,
-    insetInlineStart
-  });
-  const displayVariants = {
-    inline: {
-      label: 'view--inline',
-      display: 'inline'
-    },
-    block: {
-      label: 'view--block',
-      display: 'block'
-    },
-    'inline-block': {
-      label: 'view--inlineBlock',
-      display: 'inline-block',
-      verticalAlign: 'middle'
-    },
-    flex: {
-      label: 'view--flex',
-      display: 'flex'
-    },
-    'inline-flex': {
-      label: 'view--inlineFlex',
-      display: 'inline-flex',
-      verticalAlign: 'middle'
-    },
-    contents: {
-      label: 'view--contents',
-      display: 'contents'
-    },
-    inherit: {
-      label: 'view--inherit',
-      display: 'inherit'
-    },
-    initial: {
-      label: 'view--initial',
-      display: 'initial'
-    },
-    revert: {
-      label: 'view--revert',
-      display: 'revert'
-    },
-    'revert-layer': {
-      label: 'view--revertLayer',
-      display: 'revert-layer'
-    },
-    unset: {
-      label: 'view--unset',
-      display: 'unset'
-    },
-    auto: {}
-  };
-  const textAlignVariants = {
-    start: {
-      textAlign: 'start'
-    },
-    center: {
-      textAlign: 'center'
-    },
-    end: {
-      textAlign: 'end'
-    }
-  };
-  const borderColorVariants = {
-    transparent: {
-      borderColor: componentTheme.borderColorTransparent
-    },
-    primary: {
-      borderColor: componentTheme.borderColorPrimary
-    },
-    secondary: {
-      borderColor: componentTheme.borderColorSecondary
-    },
-    brand: {
-      borderColor: componentTheme.borderColorBrand
-    },
-    info: {
-      borderColor: componentTheme.borderColorInfo
-    },
-    success: {
-      borderColor: componentTheme.borderColorSuccess
-    },
-    warning: {
-      borderColor: componentTheme.borderColorWarning
-    },
-    alert: {
-      borderColor: componentTheme.borderColorAlert
-    },
-    danger: {
-      borderColor: componentTheme.borderColorDanger
-    }
-  };
-  const backgroundColorVariants = {
-    transparent: {
-      color: componentTheme.color,
-      background: 'none'
-    },
-    primary: {
-      color: componentTheme.color,
-      background: componentTheme.backgroundPrimary
-    },
-    secondary: {
-      color: componentTheme.color,
-      background: componentTheme.backgroundSecondary
-    },
-    ['primary-inverse']: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundPrimaryInverse
-    },
-    brand: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundBrand
-    },
-    info: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundInfo
-    },
-    alert: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundAlert
-    },
-    success: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundSuccess
-    },
-    danger: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundDanger
-    },
-    warning: {
-      color: componentTheme.colorPrimaryInverse,
-      background: componentTheme.backgroundWarning
-    }
-  };
-  const stackingVariants = {
-    topmost: {
-      zIndex: componentTheme.stackingTopmost
-    },
-    above: {
-      zIndex: componentTheme.stackingAbove
-    },
-    resting: {},
-    below: {
-      zIndex: componentTheme.stackingBelow
-    },
-    deepest: {
-      zIndex: componentTheme.stackingDeepest
-    }
-  };
-  const shadowVariants = {
-    topmost: {
-      boxShadow: componentTheme.shadowTopmost
-    },
-    resting: {
-      boxShadow: componentTheme.shadowResting
-    },
-    above: {
-      boxShadow: componentTheme.shadowAbove
-    },
-    none: {}
-  };
-  const focusStyles = getFocusStyles(props, componentTheme);
-  return {
-    view: {
-      label: 'view',
-      boxSizing: 'border-box',
-      fontFamily: componentTheme.fontFamily,
-      maxWidth: '100%',
-      overflow: 'visible',
-      ...displayVariants[display],
-      ...(background && backgroundColorVariants[background]),
-      ...(stacking && stackingVariants[stacking]),
-      ...(shadow && shadowVariants[shadow]),
-      ...(textAlign && textAlignVariants[textAlign]),
-      overflowX: overflowX && overflowX !== 'visible' ? overflowX : '',
-      overflowY: overflowY && overflowY !== 'visible' ? overflowY : '',
-      position: position !== 'static' ? position : '',
-      overscrollBehavior: overscrollBehavior ? overscrollBehavior : 'auto',
-      ...(withVisualDebug ? {
-        boxShadow: `0 0 0 1px ${componentTheme.debugOutlineColor}`
-      } : {}),
-      ...(withBorder(props) ? {
-        borderStyle: componentTheme.borderStyle,
-        ...(borderColorVariants[borderColor] || {
-          borderColor: borderColor
-        })
-      } : {}),
-      ...borderStyle
-    },
-    inlineStyles: {
-      //every '&' symbol will add another class to the rule, so it will be stronger
-      //making an accidental override less likely
-      '&&&&&&&&&&': {
-        ...spacingStyle,
-        ...offsetStyle,
-        ...focusStyles,
-        width,
-        height,
-        minWidth,
-        minHeight,
-        maxWidth,
-        maxHeight,
-        ...getStyleProps(props)
-      }
-    }
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/View/theme.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("@instructure/emotion");
-/*
- * 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.
- */
-
-/* Global variables (colors, typography, spacing, etc.) are defined in lib/themes */
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22;
-  const colors = theme.colors,
-    typography = theme.typography,
-    borders = theme.borders,
-    breakpoints = theme.breakpoints,
-    spacing = theme.spacing,
-    shadows = theme.shadows,
-    stacking = theme.stacking,
-    themeName = theme.key;
-  const themeSpecificStyle = {
-    canvas: {
-      color: theme['ic-brand-font-color-dark'],
-      focusColorInfo: theme['ic-brand-primary'],
-      backgroundBrand: theme['ic-brand-primary'],
-      backgroundInfo: theme['ic-brand-primary'],
-      borderColorBrand: theme['ic-brand-primary'],
-      borderColorInfo: theme['ic-brand-primary']
-    }
-  };
-  const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    colorPrimaryInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    borderColorPrimary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1424,
-    borderColorSecondary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey3045,
-    borderColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.green4570,
-    borderColorBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
-    borderColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
-    borderColorAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
-    borderColorWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.orange4570,
-    borderColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.red4570,
-    borderColorTransparent: 'transparent',
-    debugOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.red4570,
-    backgroundPrimary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
-    backgroundSecondary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1111,
-    backgroundPrimaryInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey125125,
-    backgroundBrand: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570,
-    backgroundInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts14 = colors.contrasts) === null || _colors$contrasts14 === void 0 ? void 0 : _colors$contrasts14.blue4570,
-    backgroundAlert: colors === null || colors === void 0 ? void 0 : (_colors$contrasts15 = colors.contrasts) === null || _colors$contrasts15 === void 0 ? void 0 : _colors$contrasts15.blue4570,
-    backgroundSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts16 = colors.contrasts) === null || _colors$contrasts16 === void 0 ? void 0 : _colors$contrasts16.green4570,
-    backgroundDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts17 = colors.contrasts) === null || _colors$contrasts17 === void 0 ? void 0 : _colors$contrasts17.red4570,
-    backgroundWarning: colors === null || colors === void 0 ? void 0 : (_colors$contrasts18 = colors.contrasts) === null || _colors$contrasts18 === void 0 ? void 0 : _colors$contrasts18.orange4570,
-    arrowSize: '0.5rem',
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineOffset: '0.3125rem',
-    focusOutlineInset: '0rem',
-    // do not use unitless zero (for CSS calc())
-
-    focusColorInfo: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.blue4570,
-    focusColorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.red4570,
-    focusColorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.green4570,
-    focusColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.white1010,
-    xSmallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
-    smallMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small,
-    mediumMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
-    largeMaxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.large,
-    ...(0, _emotion.makeThemeVars)('margin', spacing),
-    ...(0, _emotion.makeThemeVars)('padding', spacing),
-    ...(0, _emotion.makeThemeVars)('shadow', shadows),
-    ...(0, _emotion.makeThemeVars)('stacking', stacking),
-    ...(0, _emotion.makeThemeVars)('border', borders)
-  };
-  return {
-    ...componentVariables,
-    ...themeSpecificStyle[themeName]
-  };
-};
-var _default = exports.default = generateComponentTheme;

package/lib/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ContextView", {
-  enumerable: true,
-  get: function () {
-    return _ContextView.ContextView;
-  }
-});
-Object.defineProperty(exports, "View", {
-  enumerable: true,
-  get: function () {
-    return _View.View;
-  }
-});
-var _ContextView = require("./ContextView");
-var _View = require("./View");

package/lib/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}