@zohodesk/dot 1.9.17 → 1.9.19

package/es/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/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,
@@ -73,8 +74,4 @@ export default class RequestUrlNotFound extends React.Component {
 
 }
 RequestUrlNotFound.propTypes = propTypes;
-RequestUrlNotFound.defaultProps = defaultProps; // if (__DOCS__) {
-//   RequestUrlNotFound.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+RequestUrlNotFound.defaultProps = defaultProps;

package/es/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/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,
@@ -73,10 +74,4 @@ export default class UnableToProcess extends React.Component {
 
 }
 UnableToProcess.propTypes = propTypes;
-UnableToProcess.defaultProps = defaultProps;
-
-if (__DOCS__) {
-  UnableToProcess.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+UnableToProcess.defaultProps = defaultProps;

package/es/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/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,
@@ -73,8 +74,4 @@ export default class UnauthorizedLogin extends React.Component {
 
 }
 UnauthorizedLogin.propTypes = propTypes;
-UnauthorizedLogin.defaultProps = defaultProps; // if (__DOCS__) {
-//   UnauthorizedLogin.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+UnauthorizedLogin.defaultProps = defaultProps;

package/es/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/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,18 +55,14 @@ 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."))));
   }
 
 }
 WillBack.propTypes = propTypes;
-WillBack.defaultProps = defaultProps; // if (__DOCS__) {
-//   WillBack.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+WillBack.defaultProps = defaultProps;

package/es/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/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,
@@ -145,9 +146,4 @@ export default class CheckBoxField extends PureComponent {
 
 }
 CheckBoxField.propTypes = propTypes;
-CheckBoxField.defaultProps = defaultProps; // if (__DOCS__) {
-//   CheckBoxField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+CheckBoxField.defaultProps = defaultProps;

package/es/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"

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -13,6 +13,7 @@ import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from "../FieldContainer/FieldContainer";
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "../Fields.module.css";
 export default class CurrencyField extends PureComponent {
   constructor(props) {
@@ -121,7 +122,7 @@ export default class CurrencyField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     const isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
     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
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
@@ -143,7 +144,7 @@ export default class CurrencyField extends PureComponent {
       customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+      className: cn(`${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`)
     }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
       htmlId: uniqueId,
       id: id,
@@ -185,9 +186,4 @@ export default class CurrencyField extends PureComponent {
 
 }
 CurrencyField.propTypes = propTypes;
-CurrencyField.defaultProps = defaultProps; // if (__DOCS__) {
-//   CurrencyField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+CurrencyField.defaultProps = defaultProps;