@instructure/ui-form-field 8.17.1-snapshot.82 → 8.18.1-snapshot.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
+
+**Note:** Version bump only for package @instructure/ui-form-field
+
 # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
 
 ### Bug Fixes

package/es/FormFieldGroup/index.js

@@ -59,11 +59,15 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    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.makeStylesVariables);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
 
   get makeStylesVariables() {
@@ -100,15 +104,15 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
     const styles = this.props.styles;
     return jsx("span", {
       key: "fields",
-      css: styles?.formFieldGroup
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup
     }, this.renderChildren());
   }
 
   render() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, FormFieldLayout.allowedProps), {
       vAlign: props.vAlign,

package/es/FormFieldGroup/theme.js

@@ -32,12 +32,12 @@ const generateComponentTheme = theme => {
         colors = theme.colors,
         spacing = theme.spacing;
   const componentVariables = {
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
     borderColor: 'transparent',
-    borderRadius: borders?.radiusMedium,
-    errorBorderColor: colors?.borderDanger,
-    errorFieldsPadding: spacing?.xSmall
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    errorFieldsPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
   };
   return { ...componentVariables
   };

package/es/FormFieldLabel/index.js

@@ -60,21 +60,25 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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 ElementType = getElementType(FormFieldLabel, this.props);
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          children = _this$props.children;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
     return jsx(ElementType //@ts-expect-error too complex union type
     , Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
-      css: styles?.formFieldLabel,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef
     }), children);
   }

package/es/FormFieldLabel/theme.js

@@ -37,11 +37,11 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    color: colors?.textDarkest,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightBold,
-    fontSize: typography?.fontSizeMedium,
-    lineHeight: typography?.lineHeightFit
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/FormFieldLayout/index.js

@@ -73,11 +73,15 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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);
   }
 
   get hasVisibleLabel() {
@@ -137,16 +141,16 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
     const ElementType = this.elementType;
 
-    const _this$props = this.props,
-          makeStyles = _this$props.makeStyles,
-          styles = _this$props.styles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          makeStyles = _this$props3.makeStyles,
+          styles = _this$props3.styles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     const width = props.width,
           layout = props.layout,
           children = props.children;
     return jsx(ElementType, Object.assign({}, omitProps(props, [...FormFieldLayout.allowedProps, ...Grid.allowedProps]), {
-      css: styles?.formFieldLayout,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       style: {
         width
       },

package/es/FormFieldMessage/index.js

@@ -59,19 +59,23 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     return this.props.variant !== 'screenreader-only' ? jsx("span", {
-      css: styles?.formFieldMessage,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
     }, children) : jsx(ScreenReaderContent, {
       elementRef: this.handleRef

package/es/FormFieldMessage/theme.js

@@ -37,13 +37,13 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    colorHint: colors?.textDarkest,
-    colorError: colors?.textDanger,
-    colorSuccess: colors?.textSuccess,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    fontSize: typography?.fontSizeSmall,
-    lineHeight: typography?.lineHeight
+    colorHint: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    colorError: colors === null || colors === void 0 ? void 0 : colors.textDanger,
+    colorSuccess: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/FormFieldMessages/index.js

@@ -63,25 +63,29 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$props = this.props,
-          messages = _this$props.messages,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          messages = _this$props3.messages,
+          styles = _this$props3.styles;
     return messages && messages.length > 0 ? jsx("span", Object.assign({
-      css: styles?.formFieldMessages
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
     }, omitProps(this.props, FormFieldMessages.allowedProps), {
       ref: this.handleRef
     }), messages.map((msg, i) => {
       return jsx("span", {
         key: `error${i}`,
-        css: styles?.message
+        css: styles === null || styles === void 0 ? void 0 : styles.message
       }, jsx(FormFieldMessage, {
         variant: msg.type
       }, msg.text));

package/es/FormFieldMessages/theme.js

@@ -30,7 +30,7 @@
 const generateComponentTheme = theme => {
   const spacing = theme.spacing;
   const componentVariables = {
-    topMargin: spacing?.xxSmall
+    topMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
   };
   return { ...componentVariables
   };

package/lib/FormFieldGroup/index.js

@@ -53,11 +53,15 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    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.makeStylesVariables);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
 
   get makeStylesVariables() {
@@ -94,15 +98,15 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     const styles = this.props.styles;
     return (0, _emotion.jsx)("span", {
       key: "fields",
-      css: styles?.formFieldGroup
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup
     }, this.renderChildren());
   }
 
   render() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps), (0, _pickProps.pickProps)(props, _FormFieldLayout.FormFieldLayout.allowedProps), {
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',

package/lib/FormFieldGroup/theme.js

@@ -39,12 +39,12 @@ const generateComponentTheme = theme => {
         colors = theme.colors,
         spacing = theme.spacing;
   const componentVariables = {
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
     borderColor: 'transparent',
-    borderRadius: borders?.radiusMedium,
-    errorBorderColor: colors?.borderDanger,
-    errorFieldsPadding: spacing?.xSmall
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+    errorFieldsPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
   };
   return { ...componentVariables
   };

package/lib/FormFieldLabel/index.js

@@ -51,21 +51,25 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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 ElementType = (0, _getElementType.getElementType)(FormFieldLabel, this.props);
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          children = _this$props.children;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
     return (0, _emotion.jsx)(ElementType //@ts-expect-error too complex union type
     , Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
-      css: styles?.formFieldLabel,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
       ref: this.handleRef
     }), children);
   }

package/lib/FormFieldLabel/theme.js

@@ -44,11 +44,11 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    color: colors?.textDarkest,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightBold,
-    fontSize: typography?.fontSizeMedium,
-    lineHeight: typography?.lineHeightFit
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/FormFieldLayout/index.js

@@ -74,11 +74,15 @@ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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);
   }
 
   get hasVisibleLabel() {
@@ -137,15 +141,15 @@ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _
   render() {
     // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
     const ElementType = this.elementType;
-    const _this$props = this.props,
-          makeStyles = _this$props.makeStyles,
-          styles = _this$props.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          makeStyles = _this$props3.makeStyles,
+          styles = _this$props3.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const width = props.width,
           layout = props.layout,
           children = props.children;
     return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(props, [...FormFieldLayout.allowedProps, ..._Grid.Grid.allowedProps]), {
-      css: styles?.formFieldLayout,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       style: {
         width
       },

package/lib/FormFieldMessage/index.js

@@ -48,19 +48,23 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     return this.props.variant !== 'screenreader-only' ? (0, _emotion.jsx)("span", {
-      css: styles?.formFieldMessage,
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
     }, children) : (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, {
       elementRef: this.handleRef

package/lib/FormFieldMessage/theme.js

@@ -44,13 +44,13 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    colorHint: colors?.textDarkest,
-    colorError: colors?.textDanger,
-    colorSuccess: colors?.textSuccess,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    fontSize: typography?.fontSizeSmall,
-    lineHeight: typography?.lineHeight
+    colorHint: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    colorError: colors === null || colors === void 0 ? void 0 : colors.textDanger,
+    colorSuccess: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/FormFieldMessages/index.js

@@ -53,25 +53,29 @@ let FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$props = this.props,
-          messages = _this$props.messages,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          messages = _this$props3.messages,
+          styles = _this$props3.styles;
     return messages && messages.length > 0 ? (0, _emotion.jsx)("span", Object.assign({
-      css: styles?.formFieldMessages
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
     }, (0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps), {
       ref: this.handleRef
     }), messages.map((msg, i) => {
       return (0, _emotion.jsx)("span", {
         key: `error${i}`,
-        css: styles?.message
+        css: styles === null || styles === void 0 ? void 0 : styles.message
       }, (0, _emotion.jsx)(_FormFieldMessage.FormFieldMessage, {
         variant: msg.type
       }, msg.text));

package/lib/FormFieldMessages/theme.js

@@ -37,7 +37,7 @@ exports.default = void 0;
 const generateComponentTheme = theme => {
   const spacing = theme.spacing;
   const componentVariables = {
-    topMargin: spacing?.xxSmall
+    topMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
   };
   return { ...componentVariables
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "8.17.1-snapshot.82+96244a097",
+  "version": "8.18.1-snapshot.1+669aa5892",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.17.1-snapshot.82+96244a097",
-    "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
-    "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-content": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-grid": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/uid": "8.17.1-snapshot.82+96244a097",
+    "@instructure/console": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-grid": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/uid": "8.18.1-snapshot.1+669aa5892",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
+  "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
 }