@instructure/ui-navigation 8.17.1-snapshot.18 → 8.17.1-snapshot.32

package/es/AppNav/Item/index.js

@@ -72,28 +72,22 @@ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.props.makeStyles?.();
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
-
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.props.makeStyles?.();
   }
 
   render() {
-    var _this$props$styles, _this$props$styles2;
-
     const ElementType = getElementType(Item, this.props);
-    const _this$props4 = this.props,
-          renderIcon = _this$props4.renderIcon,
-          renderLabel = _this$props4.renderLabel,
-          href = _this$props4.href,
-          renderAfter = _this$props4.renderAfter,
-          cursor = _this$props4.cursor,
-          isDisabled = _this$props4.isDisabled;
+    const _this$props2 = this.props,
+          renderIcon = _this$props2.renderIcon,
+          renderLabel = _this$props2.renderLabel,
+          href = _this$props2.href,
+          renderAfter = _this$props2.renderAfter,
+          cursor = _this$props2.cursor,
+          isDisabled = _this$props2.isDisabled;
     const icon = callRenderProp(renderIcon);
     const label = callRenderProp(renderLabel);
     const labelIsForScreenReaders = matchComponentTypes(label, [ScreenReaderContent]);
@@ -114,9 +108,9 @@ let Item = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       cursor: isDisabled ? 'not-allowed' : cursor,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item
+      css: this.props.styles?.item
     }), icon, labelIsForScreenReaders ? label : jsx("span", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label
+      css: this.props.styles?.label
     }, label), renderAfter && callRenderProp(renderAfter));
   }
 

package/es/AppNav/Item/theme.js

@@ -32,14 +32,14 @@ const generateComponentTheme = theme => {
         spacing = theme.spacing,
         typography = theme.typography;
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontFamily: typography?.fontFamily,
     fontSize: '1.125rem',
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-    textColor: colors === null || colors === void 0 ? void 0 : colors.textLink,
-    textColorSelected: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    fontWeight: typography?.fontWeightBold,
+    textColor: colors?.textLink,
+    textColorSelected: colors?.textDarkest,
     height: '2.25rem',
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
+    padding: spacing?.small,
+    backgroundColor: colors?.backgroundLightest
   };
   return { ...componentVariables
   };

package/es/AppNav/index.js

@@ -54,9 +54,7 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     this._list = null;
 
     this.measureItems = () => {
-      var _this$props$styles;
-
-      const menuTriggerWidth = px((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
+      const menuTriggerWidth = px(this.props.styles?.menuTriggerWidth);
       let visibleItemsCount = 0;
 
       if (this._list) {
@@ -115,9 +113,7 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   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?.();
 
     const _getBoundingClientRec3 = getBoundingClientRect(this._list),
           origWidth = _getBoundingClientRec3.width;
@@ -142,9 +138,7 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
 
   componentWillUnmount() {
@@ -158,11 +152,9 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   renderListItem(item, isMenuTrigger, key) {
-    var _this$props$styles2, _this$props$styles3;
-
     return jsx("li", {
       key: key,
-      css: isMenuTrigger ? (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.listItemWithMenuTrigger : (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.listItem
+      css: isMenuTrigger ? this.props.styles?.listItemWithMenuTrigger : this.props.styles?.listItem
     }, item);
   }
 
@@ -184,13 +176,11 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   }
 
   render() {
-    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
-
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          visibleItemsCount = _this$props3.visibleItemsCount,
-          screenReaderLabel = _this$props3.screenReaderLabel,
-          margin = _this$props3.margin;
+    const _this$props = this.props,
+          children = _this$props.children,
+          visibleItemsCount = _this$props.visibleItemsCount,
+          screenReaderLabel = _this$props.screenReaderLabel,
+          margin = _this$props.margin;
     const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.allowedProps), AppNav);
     const isMeasuring = this.state.isMeasuring;
     const childrenArray = Children.toArray(children);
@@ -201,13 +191,13 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     const hasRenderedContent = renderBeforeItems || renderAfterItems;
     return jsx(View, Object.assign({}, passthroughProps, {
       as: "nav",
-      css: [(_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.appNav, hasRenderedContent ? (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.alignCenter : ''],
+      css: [this.props.styles?.appNav, hasRenderedContent ? this.props.styles?.alignCenter : ''],
       margin: margin,
       display: hasRenderedContent ? 'flex' : 'block',
       elementRef: this.handleRef
     }), renderBeforeItems && jsx("span", null, renderBeforeItems), jsx("ul", {
       ref: el => this._list = el,
-      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.list,
+      css: this.props.styles?.list,
       "aria-label": callRenderProp(screenReaderLabel)
     }, visibleChildren.map((child, index) => {
       return this.renderListItem(child, false, index);

package/es/AppNav/theme.js

@@ -33,13 +33,13 @@ const generateComponentTheme = theme => {
         spacing = theme.spacing,
         typography = theme.typography;
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontFamily: typography?.fontFamily,
     height: '3.75rem',
     // 60px per product design
-    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    horizontalMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    borderColor: colors?.borderMedium,
+    borderStyle: borders?.style,
+    borderWidth: borders?.widthSmall,
+    horizontalMargin: spacing?.xxSmall,
     menuTriggerWidth: '7.5rem'
   };
   return { ...componentVariables

package/es/Navigation/NavigationItem/index.js

@@ -48,51 +48,45 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   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?.({
       minimized: this.props.minimized
     });
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+    this.props.makeStyles?.({
       minimized: this.props.minimized
     });
   }
 
   renderLink() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const ElementType = getElementType(NavigationItem, this.props);
-    const _this$props3 = this.props,
-          href = _this$props3.href,
-          onClick = _this$props3.onClick,
-          icon = _this$props3.icon,
-          label = _this$props3.label;
+    const _this$props = this.props,
+          href = _this$props.href,
+          onClick = _this$props.onClick,
+          icon = _this$props.icon,
+          label = _this$props.label;
     const props = omitProps(this.props, NavigationItem.allowedProps);
     return jsx(ElementType, Object.assign({}, props, {
       href: href,
       onClick: onClick,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
+      css: this.props.styles?.navigationItem,
       "aria-label": this.props.minimized ? label : void 0,
       ref: element => {
         this.ref = element;
       }
     }), jsx("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+      css: this.props.styles?.icon,
       "aria-hidden": "true"
     }, icon), !this.props.minimized ? jsx("div", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label
+      css: this.props.styles?.label
     }, label) : null);
   }
 
   render() {
-    const _this$props4 = this.props,
-          minimized = _this$props4.minimized,
-          label = _this$props4.label;
+    const _this$props2 = this.props,
+          minimized = _this$props2.minimized,
+          label = _this$props2.label;
     const link = this.renderLink();
     return minimized && hasVisibleChildren(label) ? jsx(Tooltip, {
       renderTip: label,

package/es/Navigation/NavigationItem/theme.js

@@ -46,24 +46,24 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightLight,
-    fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    fontSize: typography?.fontSizeSmall,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightLight,
+    fontColor: colors?.textLightest,
     iconSize: '1.625rem',
-    iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    iconColor: colors?.textLightest,
+    lineHeight: typography?.lineHeight,
     backgroundColor: 'transparent',
     linkTextDecoration: 'none',
-    hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
-    outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderDarkest}`,
-    innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
-    selectedFontColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
-    selectedIconColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
-    selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
-    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
-    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderBrand}`,
-    contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
+    hoverBackgroundColor: colors?.backgroundDarkest,
+    outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderDarkest}`,
+    innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderLightest}`,
+    selectedFontColor: colors?.textBrand,
+    selectedIconColor: colors?.textBrand,
+    selectedBackgroundColor: colors?.backgroundLightest,
+    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderLightest}`,
+    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderBrand}`,
+    contentPadding: spacing?.xxSmall
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Navigation/index.js

@@ -68,17 +68,13 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   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?.({
       minimized: this.minimized
     });
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+    this.props.makeStyles?.({
       minimized: this.minimized
     });
   }
@@ -98,13 +94,11 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
 
   renderChildren() {
     return Children.map(this.props.children, child => {
-      var _this$props$styles;
-
       const navItem = safeCloneElement(child, {
         minimized: this.state.minimized
       });
       return jsx("li", {
-        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list
+        css: this.props.styles?.list
       }, navItem);
     });
   }
@@ -114,25 +108,23 @@ let Navigation = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   render() {
-    var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
-
     const label = this.props.label;
     const props = omitProps(this.props, Navigation.allowedProps, ['minimized']);
     return jsx("nav", Object.assign({}, props, {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
+      css: this.props.styles?.navigation,
       "aria-label": label,
       ref: element => {
         this.ref = element;
       }
     }), jsx("ul", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
+      css: this.props.styles?.content
     }, this.renderChildren()), jsx("div", {
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
+      css: this.props.styles?.toggle
     }, jsx(NavigationItem, {
       "aria-expanded": !this.minimized,
       onClick: this.handleNavToggle,
       icon: jsx(IconMoveStartLine, {
-        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
+        css: this.props.styles?.toggleIcon,
         inline: false
       }),
       label: jsx(ScreenReaderContent, null, this.toggleMessage())

package/es/Navigation/theme.js

@@ -41,17 +41,17 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
-    backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
+    fontColor: colors?.textLightest,
+    backgroundColor: colors?.backgroundBrandSecondary,
     width: '5.25rem',
     minimizedWidth: '3.375rem',
-    fill: colors === null || colors === void 0 ? void 0 : colors.textLightest,
-    focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
-    focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
-    marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
+    fill: colors?.textLightest,
+    focusOutlineInnerWidth: borders?.widthMedium,
+    focusOutlineOuterWidth: borders?.widthSmall,
+    focusOutlineInnerColor: colors?.borderBrand,
+    focusOutlineOuterColor: colors?.borderLightest,
+    marginBottom: spacing?.small,
+    toggleTransition: transitions?.duration
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/AppNav/Item/index.js

@@ -73,28 +73,22 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.props.makeStyles?.();
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
-
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.props.makeStyles?.();
   }
 
   render() {
-    var _this$props$styles, _this$props$styles2;
-
     const ElementType = (0, _getElementType.getElementType)(Item, this.props);
-    const _this$props4 = this.props,
-          renderIcon = _this$props4.renderIcon,
-          renderLabel = _this$props4.renderLabel,
-          href = _this$props4.href,
-          renderAfter = _this$props4.renderAfter,
-          cursor = _this$props4.cursor,
-          isDisabled = _this$props4.isDisabled;
+    const _this$props2 = this.props,
+          renderIcon = _this$props2.renderIcon,
+          renderLabel = _this$props2.renderLabel,
+          href = _this$props2.href,
+          renderAfter = _this$props2.renderAfter,
+          cursor = _this$props2.cursor,
+          isDisabled = _this$props2.isDisabled;
     const icon = (0, _callRenderProp.callRenderProp)(renderIcon);
     const label = (0, _callRenderProp.callRenderProp)(renderLabel);
     const labelIsForScreenReaders = (0, _matchComponentTypes.matchComponentTypes)(label, [_ScreenReaderContent.ScreenReaderContent]);
@@ -115,9 +109,9 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       cursor: isDisabled ? 'not-allowed' : cursor,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.item
+      css: this.props.styles?.item
     }), icon, labelIsForScreenReaders ? label : (0, _emotion.jsx)("span", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label
+      css: this.props.styles?.label
     }, label), renderAfter && (0, _callRenderProp.callRenderProp)(renderAfter));
   }
 

package/lib/AppNav/Item/theme.js

@@ -39,14 +39,14 @@ const generateComponentTheme = theme => {
         spacing = theme.spacing,
         typography = theme.typography;
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontFamily: typography?.fontFamily,
     fontSize: '1.125rem',
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-    textColor: colors === null || colors === void 0 ? void 0 : colors.textLink,
-    textColorSelected: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    fontWeight: typography?.fontWeightBold,
+    textColor: colors?.textLink,
+    textColorSelected: colors?.textDarkest,
     height: '2.25rem',
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
+    padding: spacing?.small,
+    backgroundColor: colors?.backgroundLightest
   };
   return { ...componentVariables
   };

package/lib/AppNav/index.js

@@ -52,9 +52,7 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     this._list = null;
 
     this.measureItems = () => {
-      var _this$props$styles;
-
-      const menuTriggerWidth = (0, _px.px)((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
+      const menuTriggerWidth = (0, _px.px)(this.props.styles?.menuTriggerWidth);
       let visibleItemsCount = 0;
 
       if (this._list) {
@@ -113,9 +111,7 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   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?.();
 
     const _getBoundingClientRec3 = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
           origWidth = _getBoundingClientRec3.width;
@@ -140,9 +136,7 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
 
   componentWillUnmount() {
@@ -156,11 +150,9 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   renderListItem(item, isMenuTrigger, key) {
-    var _this$props$styles2, _this$props$styles3;
-
     return (0, _emotion.jsx)("li", {
       key: key,
-      css: isMenuTrigger ? (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.listItemWithMenuTrigger : (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.listItem
+      css: isMenuTrigger ? this.props.styles?.listItemWithMenuTrigger : this.props.styles?.listItem
     }, item);
   }
 
@@ -182,13 +174,11 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   render() {
-    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
-
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          visibleItemsCount = _this$props3.visibleItemsCount,
-          screenReaderLabel = _this$props3.screenReaderLabel,
-          margin = _this$props3.margin;
+    const _this$props = this.props,
+          children = _this$props.children,
+          visibleItemsCount = _this$props.visibleItemsCount,
+          screenReaderLabel = _this$props.screenReaderLabel,
+          margin = _this$props.margin;
 
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
 
@@ -203,13 +193,13 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     const hasRenderedContent = renderBeforeItems || renderAfterItems;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       as: "nav",
-      css: [(_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.appNav, hasRenderedContent ? (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.alignCenter : ''],
+      css: [this.props.styles?.appNav, hasRenderedContent ? this.props.styles?.alignCenter : ''],
       margin: margin,
       display: hasRenderedContent ? 'flex' : 'block',
       elementRef: this.handleRef
     }), renderBeforeItems && (0, _emotion.jsx)("span", null, renderBeforeItems), (0, _emotion.jsx)("ul", {
       ref: el => this._list = el,
-      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.list,
+      css: this.props.styles?.list,
       "aria-label": (0, _callRenderProp.callRenderProp)(screenReaderLabel)
     }, visibleChildren.map((child, index) => {
       return this.renderListItem(child, false, index);

package/lib/AppNav/theme.js

@@ -40,13 +40,13 @@ const generateComponentTheme = theme => {
         spacing = theme.spacing,
         typography = theme.typography;
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontFamily: typography?.fontFamily,
     height: '3.75rem',
     // 60px per product design
-    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    horizontalMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    borderColor: colors?.borderMedium,
+    borderStyle: borders?.style,
+    borderWidth: borders?.widthSmall,
+    horizontalMargin: spacing?.xxSmall,
     menuTriggerWidth: '7.5rem'
   };
   return { ...componentVariables

package/lib/Navigation/NavigationItem/index.js

@@ -42,51 +42,45 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   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?.({
       minimized: this.props.minimized
     });
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+    this.props.makeStyles?.({
       minimized: this.props.minimized
     });
   }
 
   renderLink() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const ElementType = (0, _getElementType.getElementType)(NavigationItem, this.props);
-    const _this$props3 = this.props,
-          href = _this$props3.href,
-          onClick = _this$props3.onClick,
-          icon = _this$props3.icon,
-          label = _this$props3.label;
+    const _this$props = this.props,
+          href = _this$props.href,
+          onClick = _this$props.onClick,
+          icon = _this$props.icon,
+          label = _this$props.label;
     const props = (0, _omitProps.omitProps)(this.props, NavigationItem.allowedProps);
     return (0, _emotion.jsx)(ElementType, Object.assign({}, props, {
       href: href,
       onClick: onClick,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
+      css: this.props.styles?.navigationItem,
       "aria-label": this.props.minimized ? label : void 0,
       ref: element => {
         this.ref = element;
       }
     }), (0, _emotion.jsx)("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
+      css: this.props.styles?.icon,
       "aria-hidden": "true"
     }, icon), !this.props.minimized ? (0, _emotion.jsx)("div", {
-      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label
+      css: this.props.styles?.label
     }, label) : null);
   }
 
   render() {
-    const _this$props4 = this.props,
-          minimized = _this$props4.minimized,
-          label = _this$props4.label;
+    const _this$props2 = this.props,
+          minimized = _this$props2.minimized,
+          label = _this$props2.label;
     const link = this.renderLink();
     return minimized && (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _emotion.jsx)(_Tooltip.Tooltip, {
       renderTip: label,