@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/errorstate/Inconvenience/__tests__/__snapshots__/Inconvenience.spec.js.snap

@@ -3,26 +3,26 @@
 exports[`Inconvenience rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="inconvenience"
     data-selector-id="container"
     data-test-id="inconvenience"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="imageContainer imageContainer shrinkOff"
+      class="noShrink imageContainer imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="inconvenience_svg"
@@ -40,7 +40,7 @@ exports[`Inconvenience rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="footerWidth footer shrinkOff"
+      class="noShrink footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -49,7 +49,7 @@ exports[`Inconvenience rendering the defult props 1`] = `
         class="btmText"
       />
       <a
-        class="container  text  "
+        class="container text"
         data-id="inconvenience_link"
         data-test-id="inconvenience_link"
         href="javascript:void(0)"

package/es/errorstate/LinkText/__tests__/__snapshots__/LinkText.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`LinkText rendering the defult props 1`] = `
 <DocumentFragment>
   <a
-    class="container  text  "
+    class="container text"
     data-id="LinkText"
     data-test-id="LinkText"
     href="javascript:void(0)"

package/es/errorstate/NoRequestFound/NoRequestFound.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import NoRequestFoundSVG from '@zohodesk/svg/es/errorstate/version1/NoRequestFound';
 import { Container, Box } from '@zohodesk/components/es/Layout';
@@ -50,9 +51,9 @@ export default class NoRequestFound extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      className: cn(uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title)
     }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      className: cn(uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle)
     }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
       className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
     }, /*#__PURE__*/React.createElement(NoRequestFoundSVG, {
@@ -61,7 +62,7 @@ export default class NoRequestFound extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, description), /*#__PURE__*/React.createElement(LinkText, {
       text: urlText,
       href: url,

package/es/errorstate/NoRequestFound/__tests__/__snapshots__/NoRequestFound.spec.js.snap

@@ -3,26 +3,26 @@
 exports[`NoRequestFound rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="noRequestFound"
     data-selector-id="container"
     data-test-id="noRequestFound"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="imageContainer imageContainer shrinkOff"
+      class="noShrink imageContainer imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="noRequestFound_svg"
@@ -40,7 +40,7 @@ exports[`NoRequestFound rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="footerWidth footer shrinkOff"
+      class="noShrink footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -49,7 +49,7 @@ exports[`NoRequestFound rendering the defult props 1`] = `
         class="btmText"
       />
       <a
-        class="container  text  "
+        class="container text"
         data-id="noRequestFound_link"
         data-test-id="noRequestFound_link"
         href="javascript:void(0)"

package/es/errorstate/PermissionPlay/PermissionPlay.js

@@ -4,6 +4,7 @@ import { propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
 import UnauthorizedLoginSVG from '@zohodesk/svg/es/errorstate/version1/UnauthorizedLogin';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./PermissionPlay.module.css";
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
@@ -50,18 +51,18 @@ export default class PermissionPlay extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      className: cn(uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title)
     }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      className: cn(uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle)
     }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
       className: uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer
     }, /*#__PURE__*/React.createElement(UnauthorizedLoginSVG, {
       isFluid: true,
       dataId: `${dataId}_svg`
     })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.lastBox} ${tablet || uptoMobile ? style.max : style.min}`
+      className: cn(`${style.lastBox} ${tablet || uptoMobile ? style.max : style.min}`)
     }, /*#__PURE__*/React.createElement("span", null, description), /*#__PURE__*/React.createElement("span", {
-      className: style.lineText
+      className: cn(style.lineText)
     }, /*#__PURE__*/React.createElement(LinkText, {
       text: urlText,
       href: url,

package/es/errorstate/PermissionPlay/__tests__/__snapshots__/PermissionPlay.spec.js.snap

@@ -3,26 +3,26 @@
 exports[`PermissionPlay rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="permissionPlay"
     data-selector-id="container"
     data-test-id="permissionPlay"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="imageContainer shrinkOff"
+      class="noShrink imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="permissionPlay_svg"
@@ -40,7 +40,7 @@ exports[`PermissionPlay rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -53,7 +53,7 @@ exports[`PermissionPlay rendering the defult props 1`] = `
           class="lineText"
         >
           <a
-            class="container  text  "
+            class="container text"
             data-id="permissionPlay_link"
             data-test-id="permissionPlay_link"
             href="javascript:void(0)"

package/es/errorstate/RequestUrlNotFound/RequestUrlNotFound.js

@@ -5,6 +5,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import UrlNotFound from '@zohodesk/svg/es/errorstate/version1/UrlNotFound';
 import LinkText from "../LinkText/LinkText";
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./RequestUrlNotFound.module.css";
 export default class RequestUrlNotFound extends React.Component {
@@ -50,9 +51,9 @@ export default class RequestUrlNotFound extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      className: cn(uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title)
     }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      className: cn(uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle)
     }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
       className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
     }, /*#__PURE__*/React.createElement(UrlNotFound, {
@@ -61,7 +62,7 @@ export default class RequestUrlNotFound extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, description), /*#__PURE__*/React.createElement(LinkText, {
       text: urlText,
       href: url,

package/es/errorstate/RequestUrlNotFound/__tests__/__snapshots__/RequestUrlNotFound.spec.js.snap

@@ -3,26 +3,26 @@
 exports[`RequestUrlNotFound rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="requestUrlNotFound"
     data-selector-id="container"
     data-test-id="requestUrlNotFound"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="imageContainer imageContainer shrinkOff"
+      class="noShrink imageContainer imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="requestUrlNotFound_svg"
@@ -40,7 +40,7 @@ exports[`RequestUrlNotFound rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="footerWidth footer shrinkOff"
+      class="noShrink footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -49,7 +49,7 @@ exports[`RequestUrlNotFound rendering the defult props 1`] = `
         class="btmText"
       />
       <a
-        class="container  text  "
+        class="container text"
         data-id="requestUrlNotFound_link"
         data-test-id="requestUrlNotFound_link"
         href="javascript:void(0)"

package/es/errorstate/UnableToProcess/UnableToProcess.js

@@ -5,6 +5,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
 import UnableToProcessRequest from '@zohodesk/svg/es/errorstate/version1/UnableToProcessRequest';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./UnableToProcess.module.css";
 export default class UnableToProcess extends React.Component {
@@ -50,9 +51,9 @@ export default class UnableToProcess extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      className: cn(uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title)
     }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      className: cn(uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle)
     }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
       className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : commonStyle.tabletImageContainer}`
     }, /*#__PURE__*/React.createElement(UnableToProcessRequest, {
@@ -61,7 +62,7 @@ export default class UnableToProcess extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, description), /*#__PURE__*/React.createElement(LinkText, {
       text: urlText,
       href: url,

package/es/errorstate/UnableToProcess/__tests__/__snapshots__/UnableToProcess.spec.js.snap

@@ -3,26 +3,26 @@
 exports[`UnableToProcess rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="unableToProcess"
     data-selector-id="container"
     data-test-id="unableToProcess"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="imageContainer tabletImageContainer shrinkOff"
+      class="noShrink imageContainer tabletImageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="unableToProcess_svg"
@@ -40,7 +40,7 @@ exports[`UnableToProcess rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="footerWidth footer shrinkOff"
+      class="noShrink footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -49,7 +49,7 @@ exports[`UnableToProcess rendering the defult props 1`] = `
         class="btmText"
       />
       <a
-        class="container  text  "
+        class="container text"
         data-id="unableToProcess_link"
         data-test-id="unableToProcess_link"
         href="javascript:void(0)"

package/es/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -5,6 +5,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
 import UnauthorizedLoginSVG from '@zohodesk/svg/es/errorstate/version1/UnauthorizedLogin';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./UnauthorizedLogin.module.css";
 export default class UnauthorizedLogin extends React.Component {
@@ -50,9 +51,9 @@ export default class UnauthorizedLogin extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, title ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
+      className: cn(uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title)
     }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
+      className: cn(uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle)
     }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
       className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : commonStyle.tabletImageContainer}`
     }, /*#__PURE__*/React.createElement(UnauthorizedLoginSVG, {
@@ -61,7 +62,7 @@ export default class UnauthorizedLogin extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, description), /*#__PURE__*/React.createElement(LinkText, {
       text: urlText,
       href: url,

package/es/errorstate/UnauthorizedLogin/__tests__/__snapshots__/UnauthorizedLogin.spec.js.snap

@@ -3,26 +3,26 @@
 exports[`UnauthorizedLogin rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="unauthorizedLogin"
     data-selector-id="container"
     data-test-id="unauthorizedLogin"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="imageContainer tabletImageContainer shrinkOff"
+      class="noShrink imageContainer tabletImageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="unauthorizedLogin_svg"
@@ -40,7 +40,7 @@ exports[`UnauthorizedLogin rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="footerWidth footer shrinkOff"
+      class="noShrink footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -49,7 +49,7 @@ exports[`UnauthorizedLogin rendering the defult props 1`] = `
         class="btmText"
       />
       <a
-        class="container  text  "
+        class="container text"
         data-id="unauthorizedLogin_link"
         data-test-id="unauthorizedLogin_link"
         href="javascript:void(0)"

package/es/errorstate/WillBack/WillBack.js

@@ -4,6 +4,7 @@ import { propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import WillBeRightBack from '@zohodesk/svg/es/errorstate/version1/WillBeRightBack';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./WillBack.module.css";
 export default class WillBack extends React.Component {
@@ -43,9 +44,9 @@ export default class WillBack extends React.Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: commonStyle.top
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? '' : `${commonStyle.header} ${style.header} `
+      className: cn(uptoMobile || tablet ? '' : `${commonStyle.header} ${style.header} `)
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile ? style.mobileTitle : tablet ? style.tabletTitle : style.title
+      className: cn(uptoMobile ? style.mobileTitle : tablet ? style.tabletTitle : style.title)
     }, "We'll be right back !"))), /*#__PURE__*/React.createElement(Box, {
       className: uptoMobile ? style.mobileImageContainer : tablet ? style.tabletImageContainer : style.imageContainer
     }, /*#__PURE__*/React.createElement(WillBeRightBack, {
@@ -54,11 +55,11 @@ export default class WillBack extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, "Our Service is temporarity unavailable. We are currently working to restore it."), /*#__PURE__*/React.createElement("div", {
-      className: `${uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText} ${style.bottomSpace} `
+      className: cn(`${uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText} ${style.bottomSpace} `)
     }, "Please try again later or report this issue"), /*#__PURE__*/React.createElement("div", {
-      className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
+      className: cn(uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText)
     }, "2013, Zoho Corp, All rights reserved."))));
   }
 

package/es/errorstate/WillBack/__tests__/__snapshots__/WillBack.spec.js.snap

@@ -3,19 +3,19 @@
 exports[`WillBack rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex cover coldir scrolly"
+    class="flex fullSize column scroll_vertical container"
     data-id="willBack"
     data-selector-id="container"
     data-test-id="willBack"
   >
     <div
-      class="top shrinkOff"
+      class="noShrink top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="header header "
+        class="header header"
       >
         <div
           class="title"
@@ -25,14 +25,14 @@ exports[`WillBack rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="imageContainer shrinkOff"
+      class="noShrink imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover  default svgCenter "
+        class="cover default svgCenter"
       >
         <svg
           data-id="willBack_svg"
@@ -50,7 +50,7 @@ exports[`WillBack rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="footerWidth footer shrinkOff"
+      class="noShrink footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -61,7 +61,7 @@ exports[`WillBack rendering the defult props 1`] = `
         Our Service is temporarity unavailable. We are currently working to restore it.
       </div>
       <div
-        class="btmText bottomSpace "
+        class="btmText bottomSpace"
       >
         Please try again later or report this issue
       </div>

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -13,6 +13,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class CheckBoxField extends PureComponent {
   constructor(props) {
@@ -109,11 +110,11 @@ export default class CheckBoxField extends PureComponent {
       }
     }, LabelProps)));
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: cn(`${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`),
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
-      className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,