@zohodesk/dot 1.9.18 → 1.9.19

package/es/NewStar/__tests__/__snapshots__/NewStar.spec.js.snap

@@ -1,16 +1,16 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`NewStar rendering the customClass props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topRight customStar"
+    class="d-flex d-flex-row star topRight customStar"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -18,7 +18,7 @@ exports[`NewStar rendering the customClass props 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -26,7 +26,7 @@ exports[`NewStar rendering the customClass props 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -39,14 +39,14 @@ exports[`NewStar rendering the customClass props 1`] = `
 exports[`NewStar rendering the default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topRight"
+    class="d-flex d-flex-row star topRight"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -54,7 +54,7 @@ exports[`NewStar rendering the default props 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -62,7 +62,7 @@ exports[`NewStar rendering the default props 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -75,14 +75,14 @@ exports[`NewStar rendering the default props 1`] = `
 exports[`NewStar rendering the palette of - blue 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topRight"
+    class="d-flex d-flex-row star topRight"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star blue starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle blue starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -90,7 +90,7 @@ exports[`NewStar rendering the palette of - blue 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star blue starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle blue starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -98,7 +98,7 @@ exports[`NewStar rendering the palette of - blue 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star blue starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle blue starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -111,14 +111,14 @@ exports[`NewStar rendering the palette of - blue 1`] = `
 exports[`NewStar rendering the palette of - green 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topRight"
+    class="d-flex d-flex-row star topRight"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star green starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle green starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -126,7 +126,7 @@ exports[`NewStar rendering the palette of - green 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star green starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle green starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -134,7 +134,7 @@ exports[`NewStar rendering the palette of - green 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star green starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle green starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -147,14 +147,14 @@ exports[`NewStar rendering the palette of - green 1`] = `
 exports[`NewStar rendering the palette of - yellow 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topRight"
+    class="d-flex d-flex-row star topRight"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star yellow starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle yellow starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -162,7 +162,7 @@ exports[`NewStar rendering the palette of - yellow 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star yellow starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle yellow starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -170,7 +170,7 @@ exports[`NewStar rendering the palette of - yellow 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star yellow starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle yellow starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -183,14 +183,14 @@ exports[`NewStar rendering the palette of - yellow 1`] = `
 exports[`NewStar rendering the position of - bottomLeft 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star bottomLeft"
+    class="d-flex d-flex-row star bottomLeft"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -198,7 +198,7 @@ exports[`NewStar rendering the position of - bottomLeft 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -206,7 +206,7 @@ exports[`NewStar rendering the position of - bottomLeft 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -219,14 +219,14 @@ exports[`NewStar rendering the position of - bottomLeft 1`] = `
 exports[`NewStar rendering the position of - bottomRight 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star bottomRight"
+    class="d-flex d-flex-row star bottomRight"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -234,7 +234,7 @@ exports[`NewStar rendering the position of - bottomRight 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -242,7 +242,7 @@ exports[`NewStar rendering the position of - bottomRight 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -255,14 +255,14 @@ exports[`NewStar rendering the position of - bottomRight 1`] = `
 exports[`NewStar rendering the position of - topLeft 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topLeft"
+    class="d-flex d-flex-row star topLeft"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -270,7 +270,7 @@ exports[`NewStar rendering the position of - topLeft 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -278,7 +278,7 @@ exports[`NewStar rendering the position of - topLeft 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -291,14 +291,14 @@ exports[`NewStar rendering the position of - topLeft 1`] = `
 exports[`NewStar rendering the position of - topRight 1`] = `
 <DocumentFragment>
   <div
-    class="flex row star topRight"
+    class="d-flex d-flex-row star topRight"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starOne"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starOne"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -306,7 +306,7 @@ exports[`NewStar rendering the position of - topRight 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starTwo"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starTwo"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"
@@ -314,7 +314,7 @@ exports[`NewStar rendering the position of - topRight 1`] = `
     />
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-snippet_star starThree"
+      class="zd_font_icons ff icon-snippet_star basic d-inline-block d-align-middle starThree"
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js

@@ -5,6 +5,7 @@ import { propTypes } from "./props/propTypes.js";
 import { defaultProps } from "./props/defaultProps.js";
 /* Style */
 
+import { cn } from "@dot-system/css-utility";
 import style from "./css/CarouselDot.module.css";
 
 function CarouselDot(props) {
@@ -22,7 +23,7 @@ function CarouselDot(props) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: `${style.bullet} ${isAnimationPaused ? style.animationPaused : ''} ${isActive ? style.bulletActive : style.bulletNormal}`,
+    className: cn(`${style.bullet} ${isAnimationPaused ? style.animationPaused : ''} ${isActive ? style.bulletActive : style.bulletNormal}`),
     onClick: handleClick,
     "data-id": customId,
     "data-test-id": testId

package/es/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CarouselDot rendering of isActive 1`] = `
 <DocumentFragment>

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

@@ -5,11 +5,10 @@
     transform: scale(1.4);
   }
   .bullet {
+    composes: d-relative d-overflow-hidden from global;
     /* padding: 4px 3px; */
-    position: relative;
     width: var(--zd_size8) ;
     height: var(--zd_size8) ;
-    overflow: hidden;
     border-radius: 20px;
   }
   .bullet,

package/es/Onboarding/CarouselDots/__tests__/__snapshots__/CarouselDots.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CarouselDots rendering of slider data 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center justifyContent_center btnCnt"
+    class="d-flex d-flex-row d-items-center d-justify-center btnCnt"
     data-id="carouselDots"
     data-test-id="carouselDots"
   >
@@ -24,7 +24,7 @@ exports[`CarouselDots rendering of slider data 1`] = `
 exports[`CarouselDots rendering prop of currentSliderIndex 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center justifyContent_center btnCnt"
+    class="d-flex d-flex-row d-items-center d-justify-center btnCnt"
     data-id="carouselDots"
     data-test-id="carouselDots"
   >
@@ -45,7 +45,7 @@ exports[`CarouselDots rendering prop of currentSliderIndex 1`] = `
 exports[`CarouselDots rendering prop of isAnimationPaused 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center justifyContent_center btnCnt"
+    class="d-flex d-flex-row d-items-center d-justify-center btnCnt"
     data-id="carouselDots"
     data-test-id="carouselDots"
   >
@@ -66,7 +66,7 @@ exports[`CarouselDots rendering prop of isAnimationPaused 1`] = `
 exports[`CarouselDots rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center justifyContent_center btnCnt"
+    class="d-flex d-flex-row d-items-center d-justify-center btnCnt"
     data-id="carouselDots"
     data-test-id="carouselDots"
   />
@@ -76,7 +76,7 @@ exports[`CarouselDots rendering the defult props 1`] = `
 exports[`CarouselDots rendering with customId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center justifyContent_center btnCnt"
+    class="d-flex d-flex-row d-items-center d-justify-center btnCnt"
     data-id="radar"
     data-test-id="carouselDots"
   />
@@ -86,7 +86,7 @@ exports[`CarouselDots rendering with customId 1`] = `
 exports[`CarouselDots rendering with testId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center justifyContent_center btnCnt"
+    class="d-flex d-flex-row d-items-center d-justify-center btnCnt"
     data-id="carouselDots"
     data-test-id="radar_test"
   />

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

@@ -1,6 +1,6 @@
 
 /* carousel style */
 .btnCnt {
-    gap: var(--zd_size7) ;
+    composes: d-gap-[7px] from global;
     height: var(--zd_size23) ;
 }

package/es/Onboarding/Onboarding.js

@@ -13,6 +13,7 @@ import Button from '@zohodesk/components/es/Button/Button';
 import Modal from '@zohodesk/components/es/Modal/Modal';
 import Ribbon from '@zohodesk/components/es/Ribbon/Ribbon';
 import Typography from '@zohodesk/components/es/Typography/Typography';
+import { cn } from "@dot-system/css-utility";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 /** local **/
@@ -103,7 +104,7 @@ const Onboarding = ({
     src: imageSource,
     className: `${style.mediaElement} ${style.image}`
   }) : videoSourceLink ? /*#__PURE__*/React.createElement("video", {
-    className: style.mediaElement,
+    className: cn(style.mediaElement),
     autoPlay: true,
     loop: true,
     muted: true
@@ -197,20 +198,20 @@ const Onboarding = ({
     ref: mainContainerEleRef,
     "data-id": `${customId}_container`,
     "data-test-id": `${testId}_container`,
-    className: `${style.mainContainer} ${position !== 'static' ? style[`positon_${position}`] : ''} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`,
+    className: cn(`${style.mainContainer} ${position !== 'static' ? style[`positon_${position}`] : ''} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`),
     onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null
   }, tagAttributes, a11yAttributes), /*#__PURE__*/React.createElement("div", {
-    className: style.mainWrapper,
+    className: cn(style.mainWrapper),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.gradientLayer
+    className: cn(style.gradientLayer)
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.circleBlur} ${style.circleBlurOne}`
+    className: cn(`${style.circleBlur} ${style.circleBlurOne}`)
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${style.circleBlur} ${style.circleBlurTwo}`
+    className: cn(`${style.circleBlur} ${style.circleBlurTwo}`)
   })), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: style.carousel,
+    className: cn(style.carousel),
     ref: isDraggable ? dragRef : null,
     "data-drag-hook": isDraggable ? "true" : "false"
   }, /*#__PURE__*/React.createElement(Flex, {
@@ -253,7 +254,7 @@ const Onboarding = ({
       $ui_alignItems: "center",
       $flag_fullsize: true
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : ''}`
+      className: cn(`${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : ''}`)
     }, mediaElement ? mediaElement : renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",