@instructure/ui-view 8.17.1-snapshot.17 → 8.17.1-snapshot.30

package/lib/ContextView/styles.js

@@ -38,27 +38,27 @@ const topPlacements = ['top', 'top start', 'top end', 'top center'];
 const getPlacementStyle = (placement, theme) => {
   if (endPlacements.includes(placement)) {
     return {
-      paddingInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
+      paddingInlineStart: theme?.arrowSize,
       paddingInlineEnd: '0'
     };
   }
 
   if (startPlacements.includes(placement)) {
     return {
-      paddingInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowSize,
+      paddingInlineEnd: theme?.arrowSize,
       paddingInlineStart: '0'
     };
   }
 
   if (bottomPlacements.includes(placement)) {
     return {
-      paddingTop: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+      paddingTop: theme?.arrowSize
     };
   }
 
   if (topPlacements.includes(placement)) {
     return {
-      paddingBottom: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+      paddingBottom: theme?.arrowSize
     };
   }
 
@@ -83,27 +83,27 @@ const getArrowCorrections = (placement, theme) => {
 
   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)`,
+      insetInlineStart: `calc((${theme?.arrowSize} + ${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)`,
+      insetInlineStart: `calc(100% - (${theme?.arrowSize} + ${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)`
+      top: `calc((${theme?.arrowSize} + ${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)`
+      top: `calc(100% - (${theme?.arrowSize} + ${theme?.arrowBorderWidth}) * 2)`
     };
   }
 
@@ -120,24 +120,24 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         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}))`,
+        marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         borderInlineEndWidth: '0',
         borderInlineEndColor: 'transparent',
-        borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
+        borderInlineStartColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
-        borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+        borderInlineStartWidth: theme?.arrowSize
       },
       __after: {
-        insetInlineEnd: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
+        insetInlineEnd: theme?.arrowBorderWidth,
         insetInlineStart: 'auto',
-        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
+        marginTop: `calc(-1 * ${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
+        borderInlineStartWidth: theme?.arrowSize,
+        borderInlineStartColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
       }
     };
   }
@@ -148,24 +148,24 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         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}))`,
+        marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         borderInlineStartWidth: '0',
         borderInlineStartColor: 'transparent',
-        borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
+        borderInlineEndColor: isInversed ? theme?.arrowBorderColorInverse : theme?.arrowBorderColor,
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
-        borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
+        borderInlineEndWidth: theme?.arrowSize
       },
       __after: {
-        insetInlineStart: theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth,
+        insetInlineStart: theme?.arrowBorderWidth,
         insetInlineEnd: 'auto',
-        marginTop: `calc(-1 * ${theme === null || theme === void 0 ? void 0 : theme.arrowSize})`,
+        marginTop: `calc(-1 * ${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
+        borderInlineEndWidth: theme?.arrowSize,
+        borderInlineEndColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
       }
     };
   }
@@ -174,7 +174,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
     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}))`,
+        marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         marginInlineEnd: '0',
         borderBottomWidth: '0',
         borderBottomColor: 'transparent',
@@ -182,14 +182,14 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         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})`,
+        bottom: theme?.arrowBorderWidth,
+        marginInlineStart: `calc(-1 * ${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
+        borderTopColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
       }
     };
   }
@@ -197,7 +197,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
   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}))`,
+      marginInlineStart: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
       marginInlineEnd: '0',
       borderTopWidth: '0',
       borderTopColor: 'transparent',
@@ -205,14 +205,14 @@ const getArrowPlacementVariant = (placement, background, theme) => {
       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})`,
+      top: theme?.arrowBorderWidth,
+      marginInlineStart: `calc(-1 * ${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
+      borderBottomColor: isInversed ? theme?.arrowBackgroundColorInverse : theme?.arrowBackgroundColor
     }
   };
 };
@@ -242,15 +242,15 @@ const generateStyle = (componentTheme, props) => {
     borderStyle: 'solid'
   };
   const arrowBackGroundVariants = {
-    default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
-    inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
+    default: componentTheme?.arrowBorderColor,
+    inverse: componentTheme?.arrowBorderColorInverse
   };
   const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme);
   return {
     contextView: {
       label: 'contextView',
       boxSizing: 'border-box',
-      minHeight: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} * 2)`,
+      minHeight: `calc(${componentTheme?.arrowSize} * 2)`,
       ...getPlacementStyle(placement, componentTheme)
     },
     contextView__content: {
@@ -261,12 +261,12 @@ const generateStyle = (componentTheme, props) => {
       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})`,
+      borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
       borderColor: arrowBackGroundVariants[background],
       ...arrowPlacementVariant.main,
       ...getArrowCorrections(placement, componentTheme),
       '&::after': {
-        borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize,
+        borderWidth: componentTheme?.arrowSize,
         borderColor: arrowBackGroundVariants[background],
         ...arrowPlacementVariant.__after,
         ...arrowBaseStyles

package/lib/ContextView/theme.js

@@ -35,14 +35,12 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _theme$borders, _theme$colors, _theme$colors2, _theme$colors3;
-
   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.white,
-    arrowBorderColor: theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.tiara,
-    arrowBackgroundColorInverse: theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.licorice,
+    arrowBorderWidth: theme?.borders?.widthSmall,
+    arrowBackgroundColor: theme?.colors?.white,
+    arrowBorderColor: theme?.colors?.tiara,
+    arrowBackgroundColorInverse: theme?.colors?.licorice,
     arrowBorderColorInverse: 'transparent'
   };
   return { ...componentVariables

package/lib/View/index.js

@@ -80,15 +80,11 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
   }
 
   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.props.makeStyles?.();
   }
 
   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 getComputedStyle can save hundreds of ms in tests and production
+    this.props.makeStyles?.(); // Not calling getComputedStyle 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',
@@ -125,35 +121,35 @@ let View = (_dec = (0, _textDirectionContextConsumer.textDirectionContextConsume
   }
 
   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,
-          styles = _this$props3.styles,
-          makeStyles = _this$props3.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const _this$props = this.props,
+          children = _this$props.children,
+          textAlign = _this$props.textAlign,
+          background = _this$props.background,
+          display = _this$props.display,
+          withVisualDebug = _this$props.withVisualDebug,
+          width = _this$props.width,
+          height = _this$props.height,
+          minWidth = _this$props.minWidth,
+          minHeight = _this$props.minHeight,
+          maxWidth = _this$props.maxWidth,
+          maxHeight = _this$props.maxHeight,
+          overflowX = _this$props.overflowX,
+          overflowY = _this$props.overflowY,
+          stacking = _this$props.stacking,
+          shadow = _this$props.shadow,
+          position = _this$props.position,
+          focusPosition = _this$props.focusPosition,
+          focusColor = _this$props.focusColor,
+          shouldAnimateFocus = _this$props.shouldAnimateFocus,
+          borderColor = _this$props.borderColor,
+          className = _this$props.className,
+          styles = _this$props.styles,
+          makeStyles = _this$props.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     const ElementType = (0, _getElementType.getElementType)(View, this.props);
     return (0, _emotion.jsx)(ElementType, Object.assign({}, (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],
+      css: [styles?.view, styles?.inlineStyles],
       ref: this.handleElementRef
     }), children);
   }

package/lib/View/theme.js

@@ -58,42 +58,42 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
-    colorPrimaryInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
-    borderColorPrimary: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
-    borderColorSecondary: colors === null || colors === void 0 ? void 0 : colors.borderDark,
-    borderColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
-    borderColorBrand: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
-    borderColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
-    borderColorAlert: colors === null || colors === void 0 ? void 0 : colors.borderAlert,
-    borderColorWarning: colors === null || colors === void 0 ? void 0 : colors.borderWarning,
-    borderColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    fontFamily: typography?.fontFamily,
+    color: colors?.textDarkest,
+    colorPrimaryInverse: colors?.textLightest,
+    borderColorPrimary: colors?.borderMedium,
+    borderColorSecondary: colors?.borderDark,
+    borderColorSuccess: colors?.borderSuccess,
+    borderColorBrand: colors?.borderBrand,
+    borderColorInfo: colors?.borderInfo,
+    borderColorAlert: colors?.borderAlert,
+    borderColorWarning: colors?.borderWarning,
+    borderColorDanger: colors?.borderDanger,
     borderColorTransparent: 'transparent',
-    debugOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDebug,
-    backgroundPrimary: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
-    backgroundSecondary: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
-    backgroundPrimaryInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
-    backgroundBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
-    backgroundInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
-    backgroundAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
-    backgroundSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
-    backgroundDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
-    backgroundWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
+    debugOutlineColor: colors?.borderDebug,
+    backgroundPrimary: colors?.backgroundLightest,
+    backgroundSecondary: colors?.backgroundLight,
+    backgroundPrimaryInverse: colors?.backgroundDarkest,
+    backgroundBrand: colors?.backgroundBrand,
+    backgroundInfo: colors?.backgroundInfo,
+    backgroundAlert: colors?.backgroundAlert,
+    backgroundSuccess: colors?.backgroundSuccess,
+    backgroundDanger: colors?.backgroundDanger,
+    backgroundWarning: colors?.backgroundWarning,
     arrowSize: '0.5rem',
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders?.style,
+    focusOutlineWidth: borders?.widthMedium,
     focusOutlineOffset: '0.3125rem',
     focusOutlineInset: '0rem',
     // do not use unitless zero (for CSS calc())
-    focusColorInfo: colors === null || colors === void 0 ? void 0 : colors.borderInfo,
-    focusColorDanger: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
-    focusColorSuccess: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
-    focusColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
-    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,
+    focusColorInfo: colors?.borderInfo,
+    focusColorDanger: colors?.borderDanger,
+    focusColorSuccess: colors?.borderSuccess,
+    focusColorInverse: colors?.borderLightest,
+    xSmallMaxWidth: breakpoints?.xSmall,
+    smallMaxWidth: breakpoints?.small,
+    mediumMaxWidth: breakpoints?.medium,
+    largeMaxWidth: breakpoints?.large,
     ...(0, _emotion.makeThemeVars)('margin', spacing),
     ...(0, _emotion.makeThemeVars)('padding', spacing),
     ...(0, _emotion.makeThemeVars)('shadow', shadows),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-view",
-  "version": "8.17.1-snapshot.17+8e38d5a2e",
+  "version": "8.17.1-snapshot.30+cb1322c25",
   "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",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/emotion": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/shared-types": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-color-utils": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-i18n": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-position": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-prop-types": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.17+8e38d5a2e",
+    "@instructure/console": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-color-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-dom-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-i18n": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-position": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.17+8e38d5a2e",
-    "@instructure/ui-themes": "8.17.1-snapshot.17+8e38d5a2e"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-themes": "8.17.1-snapshot.30+cb1322c25"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "8e38d5a2e11e842eafa2fa270e47a261c6ebb626"
+  "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
 }