@zohodesk/dot 1.7.12 → 1.7.13

package/es/Onboarding/css/Onboarding.module.css

@@ -2,6 +2,15 @@
   width: var(--zd_size360) ;
 }
 
+
+.positon_absolute{
+  position: absolute;
+}
+
+.positon_fixed{
+  position: fixed;
+}
+
 [dir=ltr] .mainContainerAnimation{
   transform-origin: 100% 100%;
   animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
@@ -41,6 +50,7 @@
   border-top-right-radius: inherit;
 }
 
+
 .mediaElement {
   width: 100% ;
   height: 100% ;
@@ -51,8 +61,10 @@
 }
 
 .image {
+  user-drag: none;
+  -webkit-user-drag: none;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; 
 }
 
 /* image filter layer */
@@ -450,7 +462,13 @@
 .carouselInner {
   transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
   width: 100% ;
-  transform: translate3d(var(--local_translate_movement), 0, 0)
+}
+[dir=ltr] .carouselInner {
+  transform: translateX(var(--local_translate_movement))
+  /*rtl:translateX(calc(var(--local_translate_movement) * -1))*/;
+}
+[dir=rtl] .carouselInner {
+  transform: translateX(calc(var(--local_translate_movement) * -1));
 }
 .carouselItem {
   width: 100% 

package/es/Onboarding/hooks/useOnboarding.js

@@ -1,6 +1,18 @@
+import { useRef } from 'react';
 import useMergeState from '@zohodesk/hooks/es/utils/useMergeState';
+import useDragger from "../../Hooks/Dragger/useDragger";
 
-const useOnboarding = props => {
+const useOnboarding = _ref => {
+  let {
+    dragBoundaryLimit,
+    isDraggable
+  } = _ref;
+  const dragRef = useRef(null);
+  useDragger({
+    isActive: isDraggable,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  });
   const [state, setState] = useMergeState({
     videoLookupLink: '',
     isVideoLookupOpen: false,
@@ -26,6 +38,7 @@ const useOnboarding = props => {
 
   return {
     state,
+    dragRef,
     openVideoLookup,
     closeVideoLookup
   };

package/es/Onboarding/hooks/useOnboardingSlider.js

@@ -4,11 +4,13 @@ const autoplayDelay = 50; // 5000ms divided by 100 for smoother animation
 const useOnboardingSlider = _ref => {
   let {
     isAutoPlayAnimation,
-    sliderData
+    sliderData,
+    animationClass
   } = _ref;
   const [currentSlide, setCurrentSlide] = useState(0);
   const [autoplay, setAutoplay] = useState(true);
   const progressRef = useRef(0);
+  const mainContainerEleRef = useRef(null);
   const totalSlidesArrayLen = sliderData.length;
   const handleSliderIndexChange = useCallback(index => {
     progressRef.current = 0;
@@ -18,13 +20,16 @@ const useOnboardingSlider = _ref => {
     progressRef.current = 0;
     setCurrentSlide(currentSlide + 1);
     setAutoplay(false);
-  }, [currentSlide]);
+  }, []);
   const handleMouseEnter = useCallback(() => {
     setAutoplay(false);
   }, []);
   const handleMouseLeave = useCallback(() => {
     setAutoplay(true);
   }, []);
+  const handleAnimationEnd = useCallback(() => {
+    mainContainerEleRef.current && mainContainerEleRef.current.classList.remove(animationClass);
+  }, [animationClass]);
   useEffect(() => {
     let progressInterval;
 
@@ -45,10 +50,12 @@ const useOnboardingSlider = _ref => {
     sliderIndex: currentSlide,
     isAnimationPaused: !autoplay,
     translateMovementVal,
+    mainContainerEleRef,
     handleMouseEnter,
     handleMouseLeave,
     handleSliderIndexChange,
-    handleSliderNext
+    handleSliderNext,
+    handleAnimationEnd
   };
 };
 

package/es/Onboarding/props/defaultProps.js

@@ -1,6 +1,7 @@
 export const defaultProps = {
   ribbonText: "New",
   videoLookupCloseText: "Esc",
+  closeIconTooltip: "Close",
   isAutoPlayAnimation: true,
   customId: "onboarding",
   testId: 'onboarding',
@@ -9,5 +10,15 @@ export const defaultProps = {
   customProps: {},
   hasBouncAnimationOnMount: true,
   hasCloseIcon: true,
-  hasRibbon: true
+  hasRibbon: true,
+  tagAttributes: {},
+  a11yAttributes: {},
+  isDraggable: true,
+  position: "static",
+  dragBoundaryLimit: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
 };

package/es/Onboarding/props/propTypes.js

@@ -10,15 +10,26 @@ export const propTypes = {
   testId: PropTypes.string,
   hasRibbon: PropTypes.bool,
   customId: PropTypes.string,
+  position: PropTypes.string,
+  isDraggable: PropTypes.bool,
   ribbonText: PropTypes.string,
   hasCloseIcon: PropTypes.bool,
   customStyle: PropTypes.object,
+  tagAttributes: PropTypes.object,
+  a11yAttributes: PropTypes.object,
   hasExpandedButton: PropTypes.bool,
+  closeIconTooltip: PropTypes.string,
   isAutoPlayAnimation: PropTypes.bool,
   onPrimaryButtonClick: PropTypes.func,
   videoLookupCloseText: PropTypes.string,
   onSecondaryButtonClick: PropTypes.func,
   hasBouncAnimationOnMount: PropTypes.bool,
+  dragBoundaryLimit: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    bottom: PropTypes.number
+  }),
   sliderData: PropTypes.arrayOf(PropTypes.shape({
     heading: PropTypes.string,
     imageSource: PropTypes.string,

package/es/VideoLookup/__tests__/VideoLookup.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
+import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
 import VideoLookup from "../VideoLookup";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('VideoLookup', () => {
   test('rendering the defult props', () => {
     const {

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -54,12 +54,12 @@
 .desc{
   word-wrap: break-word;
 }
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
+[dir=ltr] .linkDesc+.link, [dir=ltr] .desc+.link {
   margin-left: var(--zd_size4) ;
 }
+[dir=rtl] .linkDesc+.link, [dir=rtl] .desc+.link {
+  margin-right: var(--zd_size4) ;
+}
 .small .desc {
   line-height: 1.584;
 }
@@ -68,7 +68,6 @@
 }
 .link {
   color: var(--linkColor);
-  display: inline-block;
   cursor: pointer;
 }
 .link:hover {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -114,3 +114,7 @@
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }
+
+.searchEmpty{
+  padding:0 var(--zd_size10) 
+}

package/es/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -15,7 +15,7 @@ exports[`ListStencils customId and testId 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -28,14 +28,14 @@ exports[`ListStencils customId and testId 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>
@@ -58,7 +58,7 @@ exports[`ListStencils rendering the defult props 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -71,14 +71,14 @@ exports[`ListStencils rendering the defult props 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>

package/lib/ActionButton/__tests__/ActionButton.spec.js

@@ -6,10 +6,18 @@ var _react2 = require("@testing-library/react");
 
 require("@testing-library/jest-dom");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('ActionButton', function () {
   var palettes = ['primaryFilled', 'primary'];
   var sizes = ['small', 'medium', 'large'];

package/lib/AttachmentViewer/__tests__/AttachmentViewer.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _AttachmentViewer = _interopRequireDefault(require("../AttachmentViewer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('AttachmentViewer', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AttachmentViewer["default"], {

package/lib/DotProvider/__tests__/DotProvider.spec.js

@@ -6,6 +6,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _DotProvider = _interopRequireDefault(require("../DotProvider"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -16,7 +18,13 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-// snapshot test cases
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+}); // snapshot test cases
+
 describe('DotProvider Snapshot', function () {
   var THEME_APPEARANCE = ['light', 'dark', 'pureDark'];
   var THEME_COLOR = ['blue', 'green', 'orange', 'red', 'yellow'];

package/lib/Drawer/__tests__/Drawer.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _Drawer = _interopRequireDefault(require("../Drawer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 var sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge', 'xxlarge', 'default'];
 var palettes = ['dark', 'default', 'darkLight', 'plain'];
 var subDrawerSizes = ['xsmall', 'small', 'medium'];

package/lib/Hooks/Dragger/useDragger.js

@@ -97,6 +97,8 @@ function useDragger(_ref) {
     style.top = "".concat(top, "px");
     style.left = "".concat(left, "px");
     style.width = "".concat(width, "px");
+    style.bottom = 'initial';
+    style.right = 'initial';
     style.position = 'fixed';
     offset.current.x = draggableEle.current.offsetLeft - e.clientX;
     offset.current.y = draggableEle.current.offsetTop - e.clientY;

package/lib/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -52,11 +52,11 @@
   }
   [dir=ltr] .bulletActive::after {
     left:-100% ;
-    animation:  progressLoading-ltr 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=rtl] .bulletActive::after {
     right:-100% ;
-    animation:  progressLoading-rtl 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=ltr] .animationPaused::after {
     animation-play-state: paused;
@@ -64,20 +64,11 @@
   [dir=rtl] .animationPaused::after {
     animation-play-state: paused;
   }
-  @keyframes progressLoading-ltr {
+  @keyframes progressLoading {
     0% {
-      left: -100% ;
+      inset-inline-start: -100%;
     }
     100% {
-      left: 0% ;
+      inset-inline-start: 0%;
     }
   }
-  @keyframes progressLoading-rtl {
-    0% {
-      left: -100% ;
-    }
-    100% {
-      left: 0% ;
-    }
-  }
-  

package/lib/Onboarding/Onboarding.js

@@ -25,6 +25,8 @@ var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typogr
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
+var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
+
 var _VideoLookup = _interopRequireDefault(require("../VideoLookup/VideoLookup"));
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
@@ -62,11 +64,22 @@ var Onboarding = function Onboarding(_ref) {
       hasExpandedButton = _ref.hasExpandedButton,
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-      customProps = _ref.customProps;
+      customProps = _ref.customProps,
+      tagAttributes = _ref.tagAttributes,
+      a11yAttributes = _ref.a11yAttributes,
+      closeIconTooltip = _ref.closeIconTooltip,
+      dragBoundaryLimit = _ref.dragBoundaryLimit,
+      isDraggable = _ref.isDraggable,
+      position = _ref.position;
+  var getNextIndex = (0, _ZindexProvider.useZIndex)();
   var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
 
-  var _useOnboarding = (0, _useOnboarding2["default"])(),
+  var _useOnboarding = (0, _useOnboarding2["default"])({
+    dragBoundaryLimit: dragBoundaryLimit,
+    isDraggable: isDraggable && sliderData.length > 0
+  }),
       state = _useOnboarding.state,
+      dragRef = _useOnboarding.dragRef,
       openVideoLookup = _useOnboarding.openVideoLookup,
       closeVideoLookup = _useOnboarding.closeVideoLookup;
 
@@ -85,15 +98,18 @@ var Onboarding = function Onboarding(_ref) {
 
   var _useOnboardingSlider = (0, _useOnboardingSlider2["default"])({
     isAutoPlayAnimation: isAutoPlayAnimation,
-    sliderData: sliderData
+    sliderData: sliderData,
+    animationClass: style.mainContainerAnimation
   }),
       sliderIndex = _useOnboardingSlider.sliderIndex,
+      mainContainerEleRef = _useOnboardingSlider.mainContainerEleRef,
       isAnimationPaused = _useOnboardingSlider.isAnimationPaused,
       translateMovementVal = _useOnboardingSlider.translateMovementVal,
       handleMouseEnter = _useOnboardingSlider.handleMouseEnter,
       handleMouseLeave = _useOnboardingSlider.handleMouseLeave,
       handleSliderIndexChange = _useOnboardingSlider.handleSliderIndexChange,
-      handleSliderNext = _useOnboardingSlider.handleSliderNext;
+      handleSliderNext = _useOnboardingSlider.handleSliderNext,
+      handleAnimationEnd = _useOnboardingSlider.handleAnimationEnd;
 
   var renderMediaElement = function renderMediaElement(imageSource, videoSourceLink, videoSourceFormat) {
     return imageSource ? /*#__PURE__*/_react["default"].createElement(_Image["default"], {
@@ -192,11 +208,17 @@ var Onboarding = function Onboarding(_ref) {
     }, primaryButtonProps))));
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    "data-drag-container": isDraggable ? 'true' : 'false',
+    style: position !== 'static' || isDraggable ? {
+      zIndex: getNextIndex()
+    } : null,
+    ref: mainContainerEleRef,
     "data-id": "".concat(customId, "_container"),
     "data-test-id": "".concat(testId, "_container"),
-    className: "".concat(style.mainContainer, " ").concat(hasBouncAnimationOnMount ? style.mainContainerAnimation : "")
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(style.mainContainer, " ").concat(position !== 'static' ? style["positon_".concat(position)] : '', " ").concat(hasBouncAnimationOnMount ? style.mainContainerAnimation : ""),
+    onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null
+  }, tagAttributes, a11yAttributes), /*#__PURE__*/_react["default"].createElement("div", {
     className: style.mainWrapper,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -207,7 +229,9 @@ var Onboarding = function Onboarding(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(style.circleBlur, " ").concat(style.circleBlurTwo)
   })), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: style.carousel
+    className: style.carousel,
+    ref: isDraggable ? dragRef : null,
+    "data-drag-hook": isDraggable ? "true" : "false"
   }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     $ui_displayMode: "flex",
     $tagAttributes_container: {
@@ -231,6 +255,11 @@ var Onboarding = function Onboarding(_ref) {
     var isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
     var videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
     var videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
+
+    var handleOpenVideoLookup = function handleOpenVideoLookup() {
+      return openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
+    };
+
     return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_direction: "column",
@@ -238,7 +267,7 @@ var Onboarding = function Onboarding(_ref) {
       $ui_className: style.carouselItem,
       key: tabName
     }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-      $ui_className: style.header,
+      $ui_className: "".concat(style.header),
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",
@@ -258,9 +287,7 @@ var Onboarding = function Onboarding(_ref) {
       customId: "".concat(customId, "_play_icon"),
       testId: "".concat(testId, "_play_icon"),
       $ui_className: "".concat(style.playIcon, " ").concat(style.animate, " ").concat(_semanticButtonModule["default"].buttonReset),
-      $event_onClick: function $event_onClick() {
-        return openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
-      }
+      $event_onClick: videoLookupSourceLink ? handleOpenVideoLookup : null
     }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
       name: "ZD-GN-arrowFill",
       iconClass: style.playIconInner
@@ -282,8 +309,10 @@ var Onboarding = function Onboarding(_ref) {
       $ui_className: style.description
     }, descriptionProps), description)));
   }))) : null, renderFooter(sliderData, sliderIndex), hasCloseIcon ? /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-    $flag_fullsize: true,
     $ui_tagName: "button",
+    $tagAttributes_container: {
+      'data-title': closeIconTooltip
+    },
     $ui_displayMode: "flex",
     customId: "".concat(customId, "_close_icon"),
     testId: "".concat(testId, "_close_icon"),

package/lib/Onboarding/__tests__/Onboarding.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _Onboarding = _interopRequireDefault(require("../Onboarding"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('Onboarding', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], null)),
@@ -444,4 +452,48 @@ describe('Onboarding', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering data with tagAttributes', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      tagAttributes: {
+        'data-scroll': true
+      }
+    })),
+        asFragment = _render36.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with a11yAttributes', function () {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      a11yAttributes: {
+        'data-a11y-focus': true
+      }
+    })),
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with closeIconTooltip', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      closeIconTooltip: "escape"
+    })),
+        asFragment = _render38.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data with position - absolute', function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      position: "absolute"
+    })),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering data without isDraggable', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Onboarding["default"], {
+      isDraggable: false
+    })),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });