@zohodesk/dot 1.9.17 → 1.9.19

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,
@@ -127,8 +129,4 @@ var PermissionPlay = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = PermissionPlay;
 PermissionPlay.propTypes = _propTypes.propTypes;
-PermissionPlay.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   PermissionPlay.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+PermissionPlay.defaultProps = _defaultProps.defaultProps;

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

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PermissionPlay rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column scroll_vertical container"
+    class="d-flex d-h-full d-w-full d-flex-col d-overflow-y-auto d-overflow-x-hidden container"
     data-id="permissionPlay"
     data-selector-id="container"
     data-test-id="permissionPlay"
   >
     <div
-      class="noShrink top"
+      class="d-flex-shrink-0 top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="noShrink imageContainer"
+      class="d-flex-shrink-0 imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover default svgCenter"
+        class="d-h-full default svgCenter"
       >
         <svg
           data-id="permissionPlay_svg"
@@ -40,7 +40,7 @@ exports[`PermissionPlay rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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,
@@ -128,8 +130,4 @@ var RequestUrlNotFound = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = RequestUrlNotFound;
 RequestUrlNotFound.propTypes = _propTypes.propTypes;
-RequestUrlNotFound.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   RequestUrlNotFound.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+RequestUrlNotFound.defaultProps = _defaultProps.defaultProps;

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

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RequestUrlNotFound rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column scroll_vertical container"
+    class="d-flex d-h-full d-w-full d-flex-col d-overflow-y-auto d-overflow-x-hidden container"
     data-id="requestUrlNotFound"
     data-selector-id="container"
     data-test-id="requestUrlNotFound"
   >
     <div
-      class="noShrink top"
+      class="d-flex-shrink-0 top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="noShrink imageContainer imageContainer"
+      class="d-flex-shrink-0 imageContainer imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover default svgCenter"
+        class="d-h-full default svgCenter"
       >
         <svg
           data-id="requestUrlNotFound_svg"
@@ -40,7 +40,7 @@ exports[`RequestUrlNotFound rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink footerWidth footer"
+      class="d-flex-shrink-0 footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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,
@@ -128,10 +130,4 @@ var UnableToProcess = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = UnableToProcess;
 UnableToProcess.propTypes = _propTypes.propTypes;
-UnableToProcess.defaultProps = _defaultProps.defaultProps;
-
-if (__DOCS__) {
-  UnableToProcess.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+UnableToProcess.defaultProps = _defaultProps.defaultProps;

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

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`UnableToProcess rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column scroll_vertical container"
+    class="d-flex d-h-full d-w-full d-flex-col d-overflow-y-auto d-overflow-x-hidden container"
     data-id="unableToProcess"
     data-selector-id="container"
     data-test-id="unableToProcess"
   >
     <div
-      class="noShrink top"
+      class="d-flex-shrink-0 top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="noShrink imageContainer tabletImageContainer"
+      class="d-flex-shrink-0 imageContainer tabletImageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover default svgCenter"
+        class="d-h-full default svgCenter"
       >
         <svg
           data-id="unableToProcess_svg"
@@ -40,7 +40,7 @@ exports[`UnableToProcess rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink footerWidth footer"
+      class="d-flex-shrink-0 footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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,
@@ -128,8 +130,4 @@ var UnauthorizedLogin = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = UnauthorizedLogin;
 UnauthorizedLogin.propTypes = _propTypes.propTypes;
-UnauthorizedLogin.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   UnauthorizedLogin.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+UnauthorizedLogin.defaultProps = _defaultProps.defaultProps;

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

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`UnauthorizedLogin rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column scroll_vertical container"
+    class="d-flex d-h-full d-w-full d-flex-col d-overflow-y-auto d-overflow-x-hidden container"
     data-id="unauthorizedLogin"
     data-selector-id="container"
     data-test-id="unauthorizedLogin"
   >
     <div
-      class="noShrink top"
+      class="d-flex-shrink-0 top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
-      class="noShrink imageContainer tabletImageContainer"
+      class="d-flex-shrink-0 imageContainer tabletImageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover default svgCenter"
+        class="d-h-full default svgCenter"
       >
         <svg
           data-id="unauthorizedLogin_svg"
@@ -40,7 +40,7 @@ exports[`UnauthorizedLogin rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink footerWidth footer"
+      class="d-flex-shrink-0 footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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.")));
       });
     }
@@ -118,8 +120,4 @@ var WillBack = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = WillBack;
 WillBack.propTypes = _propTypes.propTypes;
-WillBack.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   WillBack.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+WillBack.defaultProps = _defaultProps.defaultProps;

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

@@ -1,15 +1,15 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`WillBack rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column scroll_vertical container"
+    class="d-flex d-h-full d-w-full d-flex-col d-overflow-y-auto d-overflow-x-hidden container"
     data-id="willBack"
     data-selector-id="container"
     data-test-id="willBack"
   >
     <div
-      class="noShrink top"
+      class="d-flex-shrink-0 top"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -25,14 +25,14 @@ exports[`WillBack rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink imageContainer"
+      class="d-flex-shrink-0 imageContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
         aria-hidden="true"
-        class="cover default svgCenter"
+        class="d-h-full default svgCenter"
       >
         <svg
           data-id="willBack_svg"
@@ -50,7 +50,7 @@ exports[`WillBack rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="noShrink footerWidth footer"
+      class="d-flex-shrink-0 footerWidth footer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"

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,
@@ -201,9 +203,4 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
 
 exports["default"] = CheckBoxField;
 CheckBoxField.propTypes = _propTypes.propTypes;
-CheckBoxField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   CheckBoxField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+CheckBoxField.defaultProps = _defaultProps.defaultProps;

package/lib/form/fields/CheckBoxField/__tests__/__snapshots__/CheckBoxField.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CheckBoxField rendering the custom children 1`] = `
 <DocumentFragment>
@@ -10,20 +10,20 @@ exports[`CheckBoxField rendering the custom children 1`] = `
       class="checkboxFieldContainer"
     >
       <div
-        class="flex row alignItems_start"
+        class="d-flex d-flex-row d-items-start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="noShrink checkboxRow"
+          class="d-flex-shrink-0 checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="inlineFlex row alignItems_center container pointer primary"
+            class="d-inline-flex d-flex-row d-items-center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -31,7 +31,7 @@ exports[`CheckBoxField rendering the custom children 1`] = `
             tabindex="0"
           >
             <div
-              class="noShrink boxContainer medium filled"
+              class="d-flex-shrink-0 boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -61,19 +61,19 @@ exports[`CheckBoxField rendering the custom children 1`] = `
           </div>
         </div>
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row alignItems_center"
+            class="d-flex d-flex-row d-items-center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
             <div
-              class="inlineFlex row alignItems_center container default checkboxText"
+              class="d-inline-flex d-flex-row d-items-center container default checkboxText"
               data-id="undefined_label"
               data-selector-id="undefined_label"
               data-test-id="undefined_label"
@@ -101,20 +101,20 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
       class="checkboxFieldContainer"
     >
       <div
-        class="flex row alignItems_start"
+        class="d-flex d-flex-row d-items-start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="noShrink checkboxRow"
+          class="d-flex-shrink-0 checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="inlineFlex row alignItems_center container pointer primary"
+            class="d-inline-flex d-flex-row d-items-center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -122,7 +122,7 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
             tabindex="0"
           >
             <div
-              class="noShrink boxContainer medium filled"
+              class="d-flex-shrink-0 boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -152,19 +152,19 @@ exports[`CheckBoxField rendering the custom label children via renderLabelProps
           </div>
         </div>
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row alignItems_center"
+            class="d-flex d-flex-row d-items-center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
             <div
-              class="inlineFlex row alignItems_center container default checkboxText"
+              class="d-inline-flex d-flex-row d-items-center container default checkboxText"
               data-id="undefined_label"
               data-selector-id="undefined_label"
               data-test-id="undefined_label"
@@ -192,20 +192,20 @@ exports[`CheckBoxField rendering the defult props 1`] = `
       class="checkboxFieldContainer"
     >
       <div
-        class="flex row alignItems_start"
+        class="d-flex d-flex-row d-items-start"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="noShrink checkboxRow"
+          class="d-flex-shrink-0 checkboxRow"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
             aria-checked="false"
-            class="inlineFlex row alignItems_center container pointer primary"
+            class="d-inline-flex d-flex-row d-items-center container pointer primary"
             data-id="checkBox"
             data-selector-id="container"
             data-test-id="checkBox"
@@ -213,7 +213,7 @@ exports[`CheckBoxField rendering the defult props 1`] = `
             tabindex="0"
           >
             <div
-              class="noShrink boxContainer medium filled"
+              class="d-flex-shrink-0 boxContainer medium filled"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -243,19 +243,19 @@ exports[`CheckBoxField rendering the defult props 1`] = `
           </div>
         </div>
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row alignItems_center"
+            class="d-flex d-flex-row d-items-center"
             data-id="containerComponent"
             data-selector-id="fieldContainer"
             data-test-id="containerComponent"
           >
             <div
-              class="inlineFlex row alignItems_center container default checkboxText"
+              class="d-inline-flex d-flex-row d-items-center container default checkboxText"
               data-id="undefined_label"
               data-selector-id="undefined_label"
               data-test-id="undefined_label"