@mui/lab 5.0.0-alpha.63 → 5.0.0-alpha.67

package/ClockPicker/Clock.js

@@ -13,9 +13,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { getHours, getMinutes } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ClockRoot = styled('div', {
-  skipSx: true
-})(({
+const ClockRoot = styled('div')(({
   theme
 }) => ({
   display: 'flex',
@@ -23,9 +21,7 @@ const ClockRoot = styled('div', {
   alignItems: 'center',
   margin: theme.spacing(2)
 }));
-const ClockClock = styled('div', {
-  skipSx: true
-})({
+const ClockClock = styled('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -34,9 +30,7 @@ const ClockClock = styled('div', {
   position: 'relative',
   pointerEvents: 'none'
 });
-const ClockSquareMask = styled('div', {
-  skipSx: true
-})({
+const ClockSquareMask = styled('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -53,9 +47,7 @@ const ClockSquareMask = styled('div', {
     cursor: 'move'
   }
 });
-const ClockPin = styled('div', {
-  skipSx: true
-})(({
+const ClockPin = styled('div')(({
   theme
 }) => ({
   width: 6,
@@ -67,9 +59,7 @@ const ClockPin = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = styled(IconButton, {
-  skipSx: true
-})(({
+const ClockAmButton = styled(IconButton)(({
   theme,
   ownerState
 }) => _extends({
@@ -84,9 +74,7 @@ const ClockAmButton = styled(IconButton, {
     backgroundColor: theme.palette.primary.light
   }
 }));
-const ClockPmButton = styled(IconButton, {
-  skipSx: true
-})(({
+const ClockPmButton = styled(IconButton)(({
   theme,
   ownerState
 }) => _extends({

package/ClockPicker/ClockNumber.js

@@ -8,9 +8,7 @@ import { generateUtilityClasses } from '@mui/base';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
-const ClockNumberRoot = styled('span', {
-  skipSx: true
-})(({
+const ClockNumberRoot = styled('span')(({
   theme,
   ownerState
 }) => _extends({

package/ClockPicker/ClockPicker.js

@@ -266,7 +266,10 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes
   /**
    * The props used for each slot inside.
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object
+  }),
 
   /**
    * Selected date @DateIOType.

package/ClockPicker/ClockPointer.js

@@ -5,9 +5,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ClockPointerRoot = styled('div', {
-  skipSx: true
-})(({
+const ClockPointerRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -20,9 +18,7 @@ const ClockPointerRoot = styled('div', {
 }, ownerState.toAnimateTransform && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = styled('div', {
-  skipSx: true
-})(({
+const ClockPointerThumb = styled('div')(({
   theme,
   ownerState
 }) => _extends({

package/DatePicker/DatePicker.js

@@ -128,7 +128,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/DatePicker/DatePickerToolbar.js

@@ -10,17 +10,13 @@ import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-const DatePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DatePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DatePickerToolbarTitle = styled(Typography, {
-  skipSx: true
-})(({
+const DatePickerToolbarTitle = styled(Typography)(({
   ownerState
 }) => _extends({}, ownerState.isLandscape && {
   margin: 'auto 16px auto auto'

package/DateRangePicker/DateRangePicker.js

@@ -176,7 +176,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/DateRangePicker/DateRangePickerInput.js

@@ -8,9 +8,7 @@ import { useMaskedInput } from '../internal/pickers/hooks/useMaskedInput';
 import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
 import { executeInTheNextEventLoopTick } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const DateRangePickerInputRoot = styled('div', {
-  skipSx: true
-})(({
+const DateRangePickerInputRoot = styled('div')(({
   theme
 }) => ({
   display: 'flex',

package/DateRangePicker/DateRangePickerToolbar.js

@@ -10,17 +10,13 @@ import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDateRangePickerToolbar', ['penIcon']);
-const DateRangePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DateRangePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DateRangePickerToolbarContainer = styled('div', {
-  skipSx: true
-})({
+const DateRangePickerToolbarContainer = styled('div')({
   display: 'flex'
 });
 /**

package/DateRangePicker/DateRangePickerViewDesktop.js

@@ -14,30 +14,22 @@ import { doNothing } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DateRangePickerViewDesktopRoot = styled('div', {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopRoot = styled('div')({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = styled('div', {
-  skipSx: true
-})(({
+const DateRangePickerViewDesktopContainer = styled('div')(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
     borderRight: `2px solid ${theme.palette.divider}`
   }
 }));
-const DateRangePickerViewDesktopCalendar = styled(PickersCalendar, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopCalendar = styled(PickersCalendar)({
   minWidth: 312,
   minHeight: 288
 });
-const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher, {
-  skipSx: true
-})({
+const DateRangePickerViewDesktopArrowSwitcher = styled(PickersArrowSwitcher)({
   padding: '16px 16px 8px 16px',
   display: 'flex',
   alignItems: 'center',

package/DateTimePicker/DateTimePicker.js

@@ -140,7 +140,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/DateTimePicker/DateTimePickerTabs.js

@@ -14,7 +14,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const viewToTab = openView => {
   // TODO: what happens if `openView` is `month`?
-  if (openView === 'day' || openView === 'year') {
+  if (['day', 'month', 'year'].includes(openView)) {
     return 'date';
   }
 
@@ -29,9 +29,7 @@ const tabToView = tab => {
   return 'hours';
 };
 
-const DateTimePickerTabsRoot = styled(Tabs, {
-  skipSx: true
-})(({
+const DateTimePickerTabsRoot = styled(Tabs)(({
   ownerState,
   theme
 }) => _extends({

package/DateTimePicker/DateTimePickerToolbar.js

@@ -16,9 +16,7 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
-const DateTimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const DateTimePickerToolbarRoot = styled(PickersToolbar)({
   paddingLeft: 16,
   paddingRight: 16,
   justifyContent: 'space-around',
@@ -28,21 +26,15 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
     right: 8
   }
 });
-const DateTimePickerToolbarDateContainer = styled('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarDateContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start'
 });
-const DateTimePickerToolbarTimeContainer = styled('div', {
-  skipSx: true
-})({
+const DateTimePickerToolbarTimeContainer = styled('div')({
   display: 'flex'
 });
-const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+const DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
   margin: '0 4px 0 2px',
   cursor: 'default'
 });

package/DesktopDatePicker/DesktopDatePicker.js

@@ -119,7 +119,11 @@ process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -160,7 +160,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -129,7 +129,11 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/Masonry/Masonry.js

@@ -167,40 +167,24 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const handleResize = elements => {
-    if (!elements) {
+  const handleResize = masonryChildren => {
+    if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
       return;
     }
 
-    let masonry;
-    let masonryFirstChild;
-    let parentWidth;
-    let childWidth;
-
-    if (elements[0].target.className.includes(classes.root)) {
-      var _elements$, _masonryFirstChild, _masonryFirstChild$co, _masonryFirstChild2;
-
-      masonry = elements[0].target;
-      parentWidth = elements[0].contentRect.width;
-      masonryFirstChild = ((_elements$ = elements[1]) == null ? void 0 : _elements$.target) || masonry.firstChild;
-      childWidth = ((_masonryFirstChild = masonryFirstChild) == null ? void 0 : (_masonryFirstChild$co = _masonryFirstChild.contentRect) == null ? void 0 : _masonryFirstChild$co.width) || ((_masonryFirstChild2 = masonryFirstChild) == null ? void 0 : _masonryFirstChild2.clientWidth) || 0;
-    } else {
-      var _elements$2, _masonry$contentRect;
-
-      masonryFirstChild = elements[0].target;
-      childWidth = elements[0].contentRect.width;
-      masonry = ((_elements$2 = elements[1]) == null ? void 0 : _elements$2.target) || masonryFirstChild.parentElement;
-      parentWidth = ((_masonry$contentRect = masonry.contentRect) == null ? void 0 : _masonry$contentRect.width) || masonry.clientWidth;
-    }
+    const masonry = masonryRef.current;
+    const masonryFirstChild = masonryRef.current.firstChild;
+    const parentWidth = masonry.clientWidth;
+    const firstChildWidth = masonryFirstChild.clientWidth;
 
-    if (parentWidth === 0 || childWidth === 0 || !masonry || !masonryFirstChild) {
+    if (parentWidth === 0 || firstChildWidth === 0) {
       return;
     }
 
     const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
     const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
     const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
-    const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    const currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));
     const columnHeights = new Array(currentNumberOfColumns).fill(0);
     let skip = false;
     masonry.childNodes.forEach(child => {
@@ -253,16 +237,10 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       return undefined;
     }
 
-    const container = masonryRef.current;
-
-    if (container && resizeObserver) {
-      // only the masonry container and its first child are observed for resizing;
-      // this might cause unforeseen problems in some use cases;
-      resizeObserver.observe(container);
-
-      if (container.firstChild) {
-        resizeObserver.observe(container.firstChild);
-      }
+    if (masonryRef.current) {
+      masonryRef.current.childNodes.forEach(childNode => {
+        resizeObserver.observe(childNode);
+      });
     }
 
     return () => resizeObserver ? resizeObserver.disconnect() : {};

package/MobileDatePicker/MobileDatePicker.js

@@ -132,7 +132,11 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -174,7 +174,11 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -144,7 +144,11 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/MonthPicker/PickersMonth.js

@@ -9,9 +9,7 @@ import { generateUtilityClasses } from '@mui/base';
 import { onSpaceOrEnter } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
-const PickersMonthRoot = styled(Typography, {
-  skipSx: true
-})(({
+const PickersMonthRoot = styled(Typography)(({
   theme
 }) => _extends({
   flex: '1 0 33.33%',

package/README.md

@@ -16,17 +16,17 @@ npm install @mui/lab
 yarn add @mui/lab
 ```
 
-The lab has a peer dependency on the Material Design components.
-If you are not already using MUI in your project, you can install it with:
+The lab has peer dependencies on the Material Design components and on the emotion library.
+If you are not already using them in your project, you can install with:
 
 <!-- #default-branch-switch -->
 
 ```sh
 // with npm
-npm install @mui/material
+npm install @mui/material @emotion/react @emotion/styled
 
 // with yarn
-yarn add @mui/material
+yarn add @mui/material @emotion/react @emotion/styled
 ```
 
 ## Documentation

package/StaticDatePicker/StaticDatePicker.js

@@ -106,7 +106,11 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -149,7 +149,11 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Default calendar month displayed when `value={null}`.

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -118,7 +118,11 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    leftArrowButton: PropTypes.object,
+    rightArrowButton: PropTypes.object,
+    switchViewButton: PropTypes.object
+  }),
 
   /**
    * Date tab icon.

package/TimePicker/TimePickerToolbar.js

@@ -34,23 +34,17 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getTimePickerToolbarUtilityClass, classes);
 };
 
-const TimePickerToolbarRoot = styled(PickersToolbar, {
-  skipSx: true
-})({
+const TimePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${timePickerToolbarClasses.penIconLandscape}`]: {
     marginTop: 'auto'
   }
 });
-const TimePickerToolbarSeparator = styled(PickersToolbarText, {
-  skipSx: true
-})({
+const TimePickerToolbarSeparator = styled(PickersToolbarText)({
   outline: 0,
   margin: '0 4px 0 2px',
   cursor: 'default'
 });
-const TimePickerToolbarHourMinuteLabel = styled('div', {
-  skipSx: true
-})(({
+const TimePickerToolbarHourMinuteLabel = styled('div')(({
   theme,
   ownerState
 }) => _extends({
@@ -62,9 +56,7 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
 }, theme.direction === 'rtl' && {
   flexDirection: 'row-reverse'
 }));
-const TimePickerToolbarAmPmSelection = styled('div', {
-  skipSx: true
-})(({
+const TimePickerToolbarAmPmSelection = styled('div')(({
   ownerState
 }) => _extends({
   display: 'flex',

package/TreeView/TreeView.js

@@ -688,6 +688,10 @@ const TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
           if (isExpandable(focusedNodeId)) {
             toggleExpansion(event);
             flag = true;
+          } else if (multiSelect) {
+            flag = selectNode(event, focusedNodeId, true);
+          } else {
+            flag = selectNode(event, focusedNodeId);
           }
         }
 

package/YearPicker/PickersYear.js

@@ -25,9 +25,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersYearUtilityClass, classes);
 };
 
-const PickersYearRoot = styled('div', {
-  skipSx: true
-})(({
+const PickersYearRoot = styled('div')(({
   ownerState
 }) => _extends({
   flexBasis: '33.3%',
@@ -37,9 +35,7 @@ const PickersYearRoot = styled('div', {
 }, (ownerState == null ? void 0 : ownerState.wrapperVariant) === 'desktop' && {
   flexBasis: '25%'
 }));
-const PickersYearButton = styled('button', {
-  skipSx: true
-})(({
+const PickersYearButton = styled('button')(({
   theme
 }) => _extends({
   color: 'unset',

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-alpha.63
+/** @license MUI v5.0.0-alpha.67
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/pickers/Picker/Picker.js

@@ -15,9 +15,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export const MobileKeyboardInputView = styled('div')({
   padding: '16px 24px'
 });
-const PickerRoot = styled('div', {
-  skipSx: true
-})(({
+const PickerRoot = styled('div')(({
   ownerState
 }) => _extends({
   display: 'flex',

package/internal/pickers/PickersArrowSwitcher.js

@@ -12,16 +12,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const PickersArrowSwitcherRoot = styled('div')({
   display: 'flex'
 });
-const PickersArrowSwitcherSpacer = styled('div', {
-  skipSx: true
-})(({
+const PickersArrowSwitcherSpacer = styled('div')(({
   theme
 }) => ({
   width: theme.spacing(3)
 }));
-const PickersArrowSwitcherButton = styled(IconButton, {
-  skipSx: true
-})(({
+const PickersArrowSwitcherButton = styled(IconButton)(({
   ownerState
 }) => _extends({}, ownerState.hidden && {
   visibility: 'hidden'