@zohodesk/dot 1.7.11 → 1.7.13

package/coverage/src/Message/props/defaultProps.js.html

@@ -82,7 +82,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/Message/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/Message/props/propTypes.js.html

@@ -142,7 +142,7 @@ export const MessageNew_propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/MessageBanner/MessageBanner.js.html

@@ -229,7 +229,7 @@ MessageBanner.propTypes = propTypes;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/MessageBanner/MessageBanner.module.css.html

@@ -184,7 +184,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/MessageBanner/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/MessageBanner/props/defaultProps.js.html

@@ -91,7 +91,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/MessageBanner/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/MessageBanner/props/propTypes.js.html

@@ -112,7 +112,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/NewStar/NewStar.js.html

@@ -244,7 +244,7 @@ NewStar.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/NewStar/NewStar.module.css.html

@@ -475,7 +475,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/NewStar/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/NewStar/props/defaultProps.js.html

@@ -82,7 +82,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/NewStar/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/NewStar/props/propTypes.js.html

@@ -106,7 +106,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/CarouselDot.js.html

@@ -169,7 +169,7 @@ export default CarouselDot
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css.html

@@ -234,20 +234,20 @@
   }
   @keyframes progressLoading {
     0% {
-      left: -100%;
+      inset-inline-start: -100%;
     }
     100% {
-      left: 0%;
+      inset-inline-start: 0%;
     }
   }
-  </pre></td></tr></table></pre>
+&nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/css/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js.html

@@ -88,7 +88,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDot/props/propTypes.js.html

@@ -100,7 +100,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/CarouselDots.js.html

@@ -223,7 +223,7 @@ export default memo(CarouselDots);
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/css/CarouselDots.module.css.html

@@ -85,7 +85,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/css/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/props/defaultProps.js.html

@@ -91,7 +91,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/CarouselDots/props/propTypes.js.html

@@ -118,7 +118,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/Onboarding/Onboarding.js.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.47% </span>
+                <span class="strong">77.77% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>26/34</span>
+                <span class='fraction'>28/36</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">87.01% </span>
+                <span class="strong">87.36% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>67/77</span>
+                <span class='fraction'>83/95</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.47% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>26/34</span>
+                <span class='fraction'>28/35</span>
             </div>
         
             
@@ -283,7 +283,19 @@
 <a name='L218'></a><a href='#L218'>218</a>
 <a name='L219'></a><a href='#L219'>219</a>
 <a name='L220'></a><a href='#L220'>220</a>
-<a name='L221'></a><a href='#L221'>221</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -334,10 +346,19 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -347,8 +368,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -357,7 +378,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-yes">24x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -366,8 +387,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -376,11 +397,11 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -394,13 +415,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -429,8 +450,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">35x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -455,6 +475,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">25x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">25x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -467,7 +490,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -517,6 +539,7 @@ import Modal from '@zohodesk/components/lib/Modal/Modal';
 import Ribbon from '@zohodesk/components/es/Ribbon/Ribbon';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 &nbsp;
 /** local **/
 import VideoLookup from '../VideoLookup/VideoLookup';
@@ -550,27 +573,36 @@ const Onboarding = ({
     hasExpandedButton,
     onPrimaryButtonClick,
     onSecondaryButtonClick,
-    customProps
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    closeIconTooltip,
+    dragBoundaryLimit,
+    isDraggable,
+    position
 }) =&gt; {
 &nbsp;
-&nbsp;
+    const getNextIndex = useZIndex();
     const style = useMergeStyle(defaultStyle, customStyle);
-    const { state, openVideoLookup, closeVideoLookup } = useOnboarding()
+    const { state, dragRef, openVideoLookup, closeVideoLookup } = useOnboarding({ dragBoundaryLimit, isDraggable: isDraggable &amp;&amp; sliderData.length &gt; 0 })
     const { videoLookupLink, isVideoLookupOpen, isEmbeddedLink, videoLookupFormat } = state
     const { primaryButtonProps, secondaryButtonProps, secondaryButtonLinkProps, ribbonProps, footerProps ,headingProps, descriptionProps,videoLookupProps} = customProps;
 &nbsp;
     
     const {
         sliderIndex,
+        mainContainerEleRef,
         isAnimationPaused,
         translateMovementVal,
         handleMouseEnter,
         handleMouseLeave,
         handleSliderIndexChange,
-        handleSliderNext
+        handleSliderNext,
+        handleAnimationEnd
     } = useOnboardingSlider({
         isAutoPlayAnimation: isAutoPlayAnimation,
-        sliderData: sliderData
+        sliderData: sliderData,
+        animationClass: style.mainContainerAnimation
     });
 &nbsp;
 &nbsp;
@@ -650,19 +682,18 @@ const Onboarding = ({
     };
 &nbsp;
     return (
-&nbsp;
-        &lt;div data-id={`${customId}_container`} data-test-id={`${testId}_container`}  className={`${style.mainContainer} ${hasBouncAnimationOnMount?style.mainContainerAnimation:""}`}&gt;
+        &lt;div data-drag-container={isDraggable?'true':'false'} style={(position !== 'static' || isDraggable ) ? {zIndex:getNextIndex()} : null } ref={mainContainerEleRef} data-id={`${customId}_container`} data-test-id={`${testId}_container`} className={`${style.mainContainer} ${position !== 'static' ? style[`positon_${position}`] : ''} ${hasBouncAnimationOnMount?style.mainContainerAnimation:""}`} onAnimationEnd={hasBouncAnimationOnMount ? handleAnimationEnd : null} {...tagAttributes} {...a11yAttributes}&gt;
             &lt;div className={style.mainWrapper} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}&gt;
                 &lt;div className={style.gradientLayer}&gt;
                     &lt;div className={`${style.circleBlur} ${style.circleBlurOne}`}&gt;&lt;/div&gt;
                     &lt;div className={`${style.circleBlur} ${style.circleBlurTwo}`}&gt;&lt;/div&gt;
                 &lt;/div&gt;
                 {Array.isArray(sliderData) &amp;&amp; sliderData.length &gt; 0 ? (
-                    &lt;div className={style.carousel}&gt;
+                    &lt;div className={style.carousel} ref={isDraggable?dragRef:<span class="branch-1 cbranch-no" title="branch not covered" >null}</span> data-drag-hook={isDraggable?"true":<span class="branch-1 cbranch-no" title="branch not covered" >"false"}</span>&gt;
                         &lt;Flex
                             $ui_displayMode='flex'
                             $tagAttributes_container={{ style: { '--local_translate_movement': `${translateMovementVal}%` } }}
-                            $ui_className={style.carouselInner}
+                            $ui_className={style.carouselInner}    
                         &gt;
                             {sliderData.map((item, index) =&gt; {
                                 const { imageSource, videoSource, mediaElement, heading, description, hasVideoPlayButton = false, videoLookupSource, tabName } = item;
@@ -672,10 +703,12 @@ const Onboarding = ({
 &nbsp;
                                 const videoSourceLink = videoSource &amp;&amp; videoSource.link ? videoSource.link : null;
                                 const videoSourceFormat = videoSource &amp;&amp; videoSource.format ? videoSource.format : null;
+&nbsp;
+                                const handleOpenVideoLookup = <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource,videoLookupSourceFormat)</span>
 &nbsp;
                                 return (
                                     &lt;Flex $ui_displayMode='flex' $ui_direction='column' $flag_shrink={false} $ui_className={style.carouselItem} key={tabName}&gt;
-                                        &lt;Flex $ui_className={style.header} $ui_displayMode='flex' $ui_justifyContent='center' $ui_alignItems='center' $flag_fullsize &gt;
+                                        &lt;Flex $ui_className={`${style.header}`} $ui_displayMode='flex' $ui_justifyContent='center' $ui_alignItems='center' $flag_fullsize &gt;
                                             &lt;div className={`${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : ''}`}&gt;
                                                 {mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat)}
                                                 {hasVideoPlayButton &amp;&amp; (
@@ -687,7 +720,7 @@ const Onboarding = ({
                                                             $ui_tagName='button'
                                                             customId={`${customId}_play_icon`} testId={`${testId}_play_icon`}
                                                             $ui_className={`${style.playIcon} ${style.animate} ${btnStyle.buttonReset}`}
-                                                            $event_onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource,videoLookupSourceFormat)}</span>
+                                                            $event_onClick={videoLookupSourceLink ? handleOpenVideoLookup :null}
                                                         &gt;
                                                             &lt;Icon name='ZD-GN-arrowFill' iconClass={style.playIconInner} /&gt;
                                                         &lt;/Flex&gt;
@@ -707,8 +740,8 @@ const Onboarding = ({
                     &lt;/div&gt;) : null}
                 {renderFooter(sliderData, sliderIndex)}
                 {/* Close icon */}
-                {hasCloseIcon ? &lt;Flex $flag_fullsize $ui_tagName='button' $ui_displayMode='flex' customId={`${customId}_close_icon`} testId={`${testId}_close_icon`} $ui_justifyContent='center' $ui_alignItems='center' $ui_className={`${style.closeIconContainer} ${btnStyle.buttonReset}`} $event_onClick={onClose}&gt;
-                    &lt;Icon name='ZD-inappClose'  iconClass={style.closeIcon} /&gt;
+                {hasCloseIcon ? &lt;Flex $ui_tagName='button' $tagAttributes_container={{'data-title':closeIconTooltip}} $ui_displayMode='flex' customId={`${customId}_close_icon`} testId={`${testId}_close_icon`} $ui_justifyContent='center' $ui_alignItems='center' $ui_className={`${style.closeIconContainer} ${btnStyle.buttonReset}`} $event_onClick={onClose}&gt;
+                    &lt;Icon name='ZD-inappClose' iconClass={style.closeIcon} /&gt;
                 &lt;/Flex&gt; : null}
                 {/* Ribbon */}
                 {hasRibbon ? &lt;Ribbon dataId={`${customId}_ribbon`} palette='primary' size='medium' customClass={style.newRibbon} type='flag' text={ribbonText} {...ribbonProps}/&gt; : null}
@@ -730,7 +763,7 @@ Onboarding.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-06-26T10:36:53.970Z
+                at 2025-07-16T12:42:32.284Z
             </div>
         <script src="../../prettify.js"></script>
         <script>