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

package/lib/errorstate/Inconvenience/Inconvenience.js

@@ -21,6 +21,8 @@ var _EmptyInconvenience = _interopRequireDefault(require("@zohodesk/svg/es/error
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _InconvenienceModule = _interopRequireDefault(require("./Inconvenience.module.css"));
@@ -100,9 +102,9 @@ var Inconvenience = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, title ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title)
         }, title) : null, subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle)
         }, subtitle) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_InconvenienceModule["default"].imageContainer, " ").concat(uptoMobile ? _EmptyStatesModule["default"].mobileImageContainer : tablet ? _EmptyStatesModule["default"].tabletImageContainer : _EmptyStatesModule["default"].imageContainer)
         }, /*#__PURE__*/_react["default"].createElement(_EmptyInconvenience["default"], {
@@ -111,7 +113,7 @@ var Inconvenience = /*#__PURE__*/function (_React$Component) {
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(uptoMobile || tablet ? '' : _EmptyStatesModule["default"].footerWidth, " ").concat(_EmptyStatesModule["default"].footer)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, description), /*#__PURE__*/_react["default"].createElement(_LinkText["default"], {
           text: urlText,
           href: url,

package/lib/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/lib/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/lib/errorstate/NoRequestFound/NoRequestFound.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _NoRequestFound = _interopRequireDefault(require("@zohodesk/svg/es/errorstate/version1/NoRequestFound"));
@@ -100,9 +102,9 @@ var NoRequestFound = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, title ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title)
         }, title) : null, subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle)
         }, subtitle) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_NoRequestFoundModule["default"].imageContainer, " ").concat(uptoMobile ? _EmptyStatesModule["default"].mobileImageContainer : tablet ? _EmptyStatesModule["default"].tabletImageContainer : _EmptyStatesModule["default"].imageContainer)
         }, /*#__PURE__*/_react["default"].createElement(_NoRequestFound["default"], {
@@ -111,7 +113,7 @@ var NoRequestFound = /*#__PURE__*/function (_React$Component) {
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(uptoMobile || tablet ? '' : _EmptyStatesModule["default"].footerWidth, " ").concat(_EmptyStatesModule["default"].footer)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, description), /*#__PURE__*/_react["default"].createElement(_LinkText["default"], {
           text: urlText,
           href: url,

package/lib/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/lib/errorstate/PermissionPlay/PermissionPlay.js

@@ -19,6 +19,8 @@ var _LinkText = _interopRequireDefault(require("../LinkText/LinkText"));
 
 var _UnauthorizedLogin = _interopRequireDefault(require("@zohodesk/svg/es/errorstate/version1/UnauthorizedLogin"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _PermissionPlayModule = _interopRequireDefault(require("./PermissionPlay.module.css"));
@@ -100,18 +102,18 @@ var PermissionPlay = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, title ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title)
         }, title) : null, subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle)
         }, subtitle) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: uptoMobile ? _EmptyStatesModule["default"].mobileImageContainer : tablet ? _EmptyStatesModule["default"].tabletImageContainer : _EmptyStatesModule["default"].imageContainer
         }, /*#__PURE__*/_react["default"].createElement(_UnauthorizedLogin["default"], {
           isFluid: true,
           dataId: "".concat(dataId, "_svg")
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_PermissionPlayModule["default"].lastBox, " ").concat(tablet || uptoMobile ? _PermissionPlayModule["default"].max : _PermissionPlayModule["default"].min)
+          className: (0, _cssUtility.cn)("".concat(_PermissionPlayModule["default"].lastBox, " ").concat(tablet || uptoMobile ? _PermissionPlayModule["default"].max : _PermissionPlayModule["default"].min))
         }, /*#__PURE__*/_react["default"].createElement("span", null, description), /*#__PURE__*/_react["default"].createElement("span", {
-          className: _PermissionPlayModule["default"].lineText
+          className: (0, _cssUtility.cn)(_PermissionPlayModule["default"].lineText)
         }, /*#__PURE__*/_react["default"].createElement(_LinkText["default"], {
           text: urlText,
           href: url,

package/lib/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/lib/errorstate/RequestUrlNotFound/RequestUrlNotFound.js

@@ -21,6 +21,8 @@ var _LinkText = _interopRequireDefault(require("../LinkText/LinkText"));
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _RequestUrlNotFoundModule = _interopRequireDefault(require("./RequestUrlNotFound.module.css"));
@@ -100,9 +102,9 @@ var RequestUrlNotFound = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, title ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title)
         }, title) : null, subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle)
         }, subtitle) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_RequestUrlNotFoundModule["default"].imageContainer, " ").concat(uptoMobile ? _EmptyStatesModule["default"].mobileImageContainer : tablet ? _EmptyStatesModule["default"].tabletImageContainer : _EmptyStatesModule["default"].imageContainer)
         }, /*#__PURE__*/_react["default"].createElement(_UrlNotFound["default"], {
@@ -111,7 +113,7 @@ var RequestUrlNotFound = /*#__PURE__*/function (_React$Component) {
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(uptoMobile || tablet ? '' : _EmptyStatesModule["default"].footerWidth, " ").concat(_EmptyStatesModule["default"].footer)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, description), /*#__PURE__*/_react["default"].createElement(_LinkText["default"], {
           text: urlText,
           href: url,

package/lib/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/lib/errorstate/UnableToProcess/UnableToProcess.js

@@ -21,6 +21,8 @@ var _UnableToProcessRequest = _interopRequireDefault(require("@zohodesk/svg/es/e
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _UnableToProcessModule = _interopRequireDefault(require("./UnableToProcess.module.css"));
@@ -100,9 +102,9 @@ var UnableToProcess = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, title ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title)
         }, title) : null, subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle)
         }, subtitle) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_UnableToProcessModule["default"].imageContainer, " ").concat(uptoMobile ? _EmptyStatesModule["default"].mobileImageContainer : _EmptyStatesModule["default"].tabletImageContainer)
         }, /*#__PURE__*/_react["default"].createElement(_UnableToProcessRequest["default"], {
@@ -111,7 +113,7 @@ var UnableToProcess = /*#__PURE__*/function (_React$Component) {
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(uptoMobile || tablet ? '' : _EmptyStatesModule["default"].footerWidth, " ").concat(_EmptyStatesModule["default"].footer)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, description), /*#__PURE__*/_react["default"].createElement(_LinkText["default"], {
           text: urlText,
           href: url,

package/lib/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/lib/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -21,6 +21,8 @@ var _UnauthorizedLogin = _interopRequireDefault(require("@zohodesk/svg/es/errors
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _UnauthorizedLoginModule = _interopRequireDefault(require("./UnauthorizedLogin.module.css"));
@@ -100,9 +102,9 @@ var UnauthorizedLogin = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, title ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileTitle : tablet ? _EmptyStatesModule["default"].tabletTitle : _EmptyStatesModule["default"].title)
         }, title) : null, subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle
+          className: (0, _cssUtility.cn)(uptoMobile ? _EmptyStatesModule["default"].mobileSubTitle : tablet ? _EmptyStatesModule["default"].tabletSubTitle : _EmptyStatesModule["default"].subtitle)
         }, subtitle) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_UnauthorizedLoginModule["default"].imageContainer, " ").concat(uptoMobile ? _EmptyStatesModule["default"].mobileImageContainer : _EmptyStatesModule["default"].tabletImageContainer)
         }, /*#__PURE__*/_react["default"].createElement(_UnauthorizedLogin["default"], {
@@ -111,7 +113,7 @@ var UnauthorizedLogin = /*#__PURE__*/function (_React$Component) {
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(uptoMobile || tablet ? '' : _EmptyStatesModule["default"].footerWidth, " ").concat(_EmptyStatesModule["default"].footer)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, description), /*#__PURE__*/_react["default"].createElement(_LinkText["default"], {
           text: urlText,
           href: url,

package/lib/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/lib/errorstate/WillBack/WillBack.js

@@ -19,6 +19,8 @@ var _WillBeRightBack = _interopRequireDefault(require("@zohodesk/svg/es/errorsta
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _EmptyStatesModule = _interopRequireDefault(require("../EmptyStates.module.css"));
 
 var _WillBackModule = _interopRequireDefault(require("./WillBack.module.css"));
@@ -92,9 +94,9 @@ var WillBack = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _EmptyStatesModule["default"].top
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? '' : "".concat(_EmptyStatesModule["default"].header, " ").concat(_WillBackModule["default"].header, " ")
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? '' : "".concat(_EmptyStatesModule["default"].header, " ").concat(_WillBackModule["default"].header, " "))
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile ? _WillBackModule["default"].mobileTitle : tablet ? _WillBackModule["default"].tabletTitle : _WillBackModule["default"].title
+          className: (0, _cssUtility.cn)(uptoMobile ? _WillBackModule["default"].mobileTitle : tablet ? _WillBackModule["default"].tabletTitle : _WillBackModule["default"].title)
         }, "We'll be right back !"))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: uptoMobile ? _WillBackModule["default"].mobileImageContainer : tablet ? _WillBackModule["default"].tabletImageContainer : _WillBackModule["default"].imageContainer
         }, /*#__PURE__*/_react["default"].createElement(_WillBeRightBack["default"], {
@@ -103,11 +105,11 @@ var WillBack = /*#__PURE__*/function (_React$Component) {
         })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(uptoMobile || tablet ? '' : _EmptyStatesModule["default"].footerWidth, " ").concat(_EmptyStatesModule["default"].footer)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, "Our Service is temporarity unavailable. We are currently working to restore it."), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText, " ").concat(_WillBackModule["default"].bottomSpace, " ")
+          className: (0, _cssUtility.cn)("".concat(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText, " ").concat(_WillBackModule["default"].bottomSpace, " "))
         }, "Please try again later or report this issue"), /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText
+          className: (0, _cssUtility.cn)(uptoMobile || tablet ? _EmptyStatesModule["default"].tabletBtmText : _EmptyStatesModule["default"].btmText)
         }, "2013, Zoho Corp, All rights reserved.")));
       });
     }

package/lib/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/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -23,6 +23,8 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -161,11 +163,11 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
       }, LabelProps)));
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
+        className: (0, _cssUtility.cn)("".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
+        className: (0, _cssUtility.cn)("".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : ''))
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,