@instructure/ui-modal 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+### Bug Fixes
+
+- **ui-modal:** fix screenreader focus order in Chrome ([f32ae67](https://github.com/instructure/instructure-ui/commit/f32ae671b35ec251c7ab3d1e50d15df6bb287308))
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/ModalBody/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "children"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -32,11 +30,11 @@ import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { omitProps } from '@instructure/ui-react-utils';
+import { getComputedStyle } from '@instructure/ui-dom-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Modal
@@ -45,44 +43,47 @@ id: Modal.Body
 @tsProps
 **/
 let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ModalBody extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(props) {
+    super(props);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
+    this.state = {
+      isFirefox: 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);
-  }
 
+    // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+    const style = this.ref && getComputedStyle(this.ref);
+    const isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
+    if (isFirefox) {
+      this.setState({
+        isFirefox
+      });
+    }
+  }
   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() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          as = _this$props3.as,
-          elementRef = _this$props3.elementRef,
-          overflow = _this$props3.overflow,
-          variant = _this$props3.variant,
-          padding = _this$props3.padding,
-          children = _this$props3.children,
-          rest = _objectWithoutProperties(_this$props3, _excluded);
-
+      as = _this$props3.as,
+      elementRef = _this$props3.elementRef,
+      overflow = _this$props3.overflow,
+      variant = _this$props3.variant,
+      padding = _this$props3.padding,
+      children = _this$props3.children,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
     const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
     return jsx(View, Object.assign({}, passthroughProps, {
@@ -92,12 +93,15 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       elementRef: this.handleRef,
       as: as,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
-      padding: padding,
-      tabIndex: -1 // prevent FF from focusing view when scrollable
-
+      padding: padding
+      // We have to make an exception in Firefox, because it makes
+      //  the container focusable when it is scrollable.
+      //  This is a feature, not a bug, but it prevents VoiceOver
+      //  to correctly focus inside the body in other browsers.
+    }, this.state.isFirefox && {
+      tabIndex: -1
     }), children);
   }
-
 }, _class2.displayName = "ModalBody", _class2.componentId = 'Modal.Body', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   padding: 'medium',
   as: 'div',

package/es/Modal/ModalBody/props.js

@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
   children: PropTypes.node,
   padding: ThemeablePropTypes.spacing,
-
   /**
    * provides a reference to the underlying html root element
    */

package/es/Modal/ModalBody/styles.js

@@ -50,5 +50,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Modal/ModalBody/theme.js

@@ -33,5 +33,4 @@ const generateComponentTheme = theme => {
     inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary
   };
 };
-
 export default generateComponentTheme;

package/es/Modal/ModalFooter/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -35,7 +33,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Modal
@@ -47,38 +44,29 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = 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() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          rest = _objectWithoutProperties(_this$props3, _excluded);
-
+      children = _this$props3.children,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
     return jsx("div", Object.assign({
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
     }, passthroughProps(rest), {
       ref: this.handleRef
     }), children);
   }
-
 }, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   variant: 'default'
 }, _class2)) || _class) || _class);

package/es/Modal/ModalFooter/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node,

package/es/Modal/ModalFooter/styles.js

@@ -55,5 +55,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Modal/ModalFooter/theme.js

@@ -29,8 +29,8 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        borders = theme.borders;
+    spacing = theme.spacing,
+    borders = theme.borders;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
@@ -40,8 +40,8 @@ const generateComponentTheme = theme => {
     inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
     inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/Modal/ModalHeader/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,7 +34,6 @@ import { CloseButton } from '@instructure/ui-buttons';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 parent: Modal
@@ -48,30 +45,23 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.makeStyleProps = () => {
       return {
         withCloseButton: this.usesCloseButton
       };
     };
   }
-
   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.makeStyleProps());
   }
-
   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.makeStyleProps());
   }
-
   get usesCloseButton() {
     let hasCloseButton = false;
     React.Children.forEach(this.props.children, child => {
@@ -81,21 +71,17 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     });
     return hasCloseButton;
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          rest = _objectWithoutProperties(_this$props3, _excluded);
-
+      children = _this$props3.children,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
     return jsx("div", Object.assign({
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
     }, passthroughProps(rest), {
       ref: this.handleRef
     }), children);
   }
-
 }, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   variant: 'default',
   spacing: 'default'

package/es/Modal/ModalHeader/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node,

package/es/Modal/ModalHeader/styles.js

@@ -34,7 +34,7 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const variant = props.variant,
-        spacing = props.spacing;
+    spacing = props.spacing;
   const withCloseButton = state.withCloseButton;
   const sizeVariants = {
     default: {
@@ -66,5 +66,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Modal/ModalHeader/theme.js

@@ -29,7 +29,7 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing;
+    spacing = theme.spacing;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
@@ -38,8 +38,8 @@ const generateComponentTheme = theme => {
     inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
     inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/Modal/ModalLocator.js

@@ -21,15 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator';
-import { Modal } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-
-const ModalHeaderLocator = locator(Modal.Header.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 
-const ModalBodyLocator = locator(Modal.Body.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { locator } from '@instructure/ui-test-locator';
+import { Modal } from './index';
 
-const ModalFooterLocator = locator(Modal.Footer.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalHeaderLocator = locator(Modal.Header.selector);
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalBodyLocator = locator(Modal.Body.selector);
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalFooterLocator = locator(Modal.Footer.selector);
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const ModalLocator = locator(Modal.selector, {
   findHeader: function () {
     return ModalHeaderLocator.find(...arguments);

package/es/Modal/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -43,7 +41,6 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -57,65 +54,50 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
     this._DOMNode = null;
     this._content = null;
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handlePortalOpen = DOMNode => {
       this.DOMNode = DOMNode;
     };
-
     this.handleTransitionExited = () => {
       this.setState({
         transitioning: false
       });
     };
-
     this.contentRef = el => {
       this._content = el;
-
       if (typeof this.props.contentRef === 'function') {
         this.props.contentRef(el);
       }
     };
-
     this.state = {
       transitioning: 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(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
         transitioning: prevProps.transition !== null
       });
     }
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   get defaultFocusElement() {
     return this.props.defaultFocusElement;
   }
-
   get DOMNode() {
     return this._DOMNode;
   }
-
   set DOMNode(el) {
     this._DOMNode = el;
   }
-
   get maskPlacement() {
     if (this.props.overflow === 'fit') {
       return 'stretch';
@@ -123,12 +105,11 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       return 'center';
     }
   }
-
   renderChildren() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          variant = _this$props3.variant,
-          overflow = _this$props3.overflow;
+      children = _this$props3.children,
+      variant = _this$props3.variant,
+      overflow = _this$props3.overflow;
     return Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
 
@@ -144,18 +125,17 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       }
     });
   }
-
   renderDialog(props) {
     const _this$props4 = this.props,
-          onDismiss = _this$props4.onDismiss,
-          label = _this$props4.label,
-          shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
-          shouldReturnFocus = _this$props4.shouldReturnFocus,
-          liveRegion = _this$props4.liveRegion,
-          size = _this$props4.size,
-          constrain = _this$props4.constrain,
-          as = _this$props4.as,
-          styles = _this$props4.styles;
+      onDismiss = _this$props4.onDismiss,
+      label = _this$props4.label,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      liveRegion = _this$props4.liveRegion,
+      size = _this$props4.size,
+      constrain = _this$props4.constrain,
+      as = _this$props4.as,
+      styles = _this$props4.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = jsx(Dialog, Object.assign({}, passthroughProps(props), {
       as: as,
@@ -169,8 +149,8 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       liveRegion: liveRegion,
       onDismiss: onDismiss,
       css: styles === null || styles === void 0 ? void 0 : styles.modal,
-      ref: this.contentRef // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
-
+      ref: this.contentRef
+      // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
     }), this.renderChildren());
     return jsx(Mask, {
       placement: this.maskPlacement,
@@ -181,27 +161,24 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       } : {}
     }, dialog);
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props5 = this.props,
-          open = _this$props5.open,
-          onOpen = _this$props5.onOpen,
-          onClose = _this$props5.onClose,
-          mountNode = _this$props5.mountNode,
-          insertAt = _this$props5.insertAt,
-          transition = _this$props5.transition,
-          onEnter = _this$props5.onEnter,
-          onEntering = _this$props5.onEntering,
-          onEntered = _this$props5.onEntered,
-          onExit = _this$props5.onExit,
-          onExiting = _this$props5.onExiting,
-          onExited = _this$props5.onExited,
-          constrain = _this$props5.constrain,
-          overflow = _this$props5.overflow,
-          passthroughProps = _objectWithoutProperties(_this$props5, _excluded);
-
+      open = _this$props5.open,
+      onOpen = _this$props5.onOpen,
+      onClose = _this$props5.onClose,
+      mountNode = _this$props5.mountNode,
+      insertAt = _this$props5.insertAt,
+      transition = _this$props5.transition,
+      onEnter = _this$props5.onEnter,
+      onEntering = _this$props5.onEntering,
+      onEntered = _this$props5.onEntered,
+      onExit = _this$props5.onExit,
+      onExiting = _this$props5.onExiting,
+      onExited = _this$props5.onExited,
+      constrain = _this$props5.constrain,
+      overflow = _this$props5.overflow,
+      passthroughProps = _objectWithoutProperties(_this$props5, _excluded);
     const portalIsOpen = open || this.state.transitioning;
     return jsx(Portal, {
       mountNode: mountNode,
@@ -225,7 +202,6 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
     }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
   }
-
 }, _class2.displayName = "Modal", _class2.componentId = 'Modal', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   open: false,
   size: 'auto',

package/es/Modal/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { ModalLocator } from './ModalLocator';
 export { ModalLocator };
 export default ModalLocator;

package/es/Modal/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { element, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
 import { transitionTypePropType } from '@instructure/ui-motion';

package/es/Modal/styles.js

@@ -34,8 +34,8 @@
  */
 const generateStyle = (componentTheme, props) => {
   const size = props.size,
-        variant = props.variant,
-        overflow = props.overflow;
+    variant = props.variant,
+    overflow = props.overflow;
   const commonSizeStyleExceptForFullscreen = {
     maxWidth: '95%',
     maxHeight: '95%',
@@ -101,5 +101,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Modal/theme.js

@@ -29,11 +29,11 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        borders = theme.borders,
-        breakpoints = theme.breakpoints,
-        shadows = theme.shadows,
-        stacking = theme.stacking;
+    typography = theme.typography,
+    borders = theme.borders,
+    breakpoints = theme.breakpoints,
+    shadows = theme.shadows,
+    stacking = theme.stacking;
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
@@ -49,8 +49,8 @@ const generateComponentTheme = theme => {
     boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
     zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;