@zohodesk/dot 1.9.18 → 1.9.20

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -1,10 +1,9 @@
 /* css:lineheight-validation:ignore */
 .container {
-  position: relative;
   line-height: var(--zd_size18);
   composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  composes: d-relative d-cursor-pointer from global;
   padding: var(--zd_size3) var(--zd_size15) ;
-  cursor: pointer;
 }
 [dir=ltr] .container {
   margin-left: var(--zd_size15) ;
@@ -21,8 +20,8 @@
   composes: flexgrow dotted offSelection from '~@zohodesk/components/es/common/common.module.css';
 }
 .departIcon {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_selectdropdown_departicon);
-  cursor: pointer;
 }
 [dir=ltr] .departIcon {
   margin-left: var(--zd_size5) ;

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -16,6 +16,7 @@ import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 import { findScrollEnd } from '@zohodesk/components/es/utils/Common';
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
+import { cn } from "@dot-system/css-utility";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import RippleEffect from '@zohodesk/components/es/RippleEffect/RippleEffect';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
@@ -560,7 +561,7 @@ export class ToggleDropDown extends Component {
     const ariaTitleId = this.getAriaId(); // const allyOptionsArr = this.getOptionsArray();
 
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: style.wrapper,
+      className: cn(style.wrapper),
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
       "data-selector-id": dataSelectorId
@@ -708,9 +709,9 @@ export class ToggleDropDown extends Component {
       return /*#__PURE__*/React.createElement(Fragment, {
         key: `index${groupName}`
       }, needDivider && /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
+        className: cn(style.seperatedLine)
       }), groupName && /*#__PURE__*/React.createElement("div", {
-        className: style.groupName
+        className: cn(style.groupName)
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: groupName,
         palette: palette,
@@ -807,7 +808,7 @@ export class ToggleDropDown extends Component {
       return /*#__PURE__*/React.createElement(Fragment, {
         key: i
       }, needDivider ? /*#__PURE__*/React.createElement("div", {
-        className: style.seperatedLine
+        className: cn(style.seperatedLine)
       }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
         dataId: item[keyName],
         value: item[keyName],
@@ -872,7 +873,7 @@ export class ToggleDropDown extends Component {
       size: "small",
       getEmptyState: this.emptySearchSVG
     }) : /*#__PURE__*/React.createElement("div", {
-      className: style.loader
+      className: cn(style.loader)
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(Box, null, getFooter()) : null))) : null);
   }
 
@@ -881,10 +882,5 @@ ToggleDropDown.defaultProps = defaultProps;
 ToggleDropDown.propTypes = propTypes;
 const ToggleDropDown_Component = Popup(ToggleDropDown);
 ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
-ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
-//   ToggleDropDown.docs = {
-//     componentGroup: 'Molecule'
-//   };
-// }
-
+ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes;
 export default ToggleDropDown_Component;

package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -1,6 +1,5 @@
 .wrapper {
-  position: relative;
-  max-width: 100% ;
+  composes: d-relative d-max-w-full from global;
 }
 .maxHgt {
   max-height: var(--zd_size265) ;
@@ -8,7 +7,7 @@
   padding-block:var(--zd_size10) ;
 }
 .responsivemaxHgt {
-  padding: 0 ;
+  composes: d-p-0 from global;
 }
 .title {
   padding-block-start: var(--zd_size6) ;
@@ -19,7 +18,7 @@
   padding-block:0 ;
 }
 .overlay_arrow {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   transform: translateY(-50%) perspective(1px);
 }
@@ -50,16 +49,13 @@
   padding-block-end: var(--zd_size25) ;
 }
 .cursorDefault {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 .cursor {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
-[dir=ltr] .dropBoxContainer {
-  text-align: left;
-}
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
+.dropBoxContainer {
+  composes: d-text-left from global;
 }
 .iconBox {
   margin-inline-end: var(--zd_size4) ;
@@ -72,23 +68,21 @@
   margin: 0 auto ;
 }
 .seperatedLine {
-  height: var(--zd_size1) ;
+  composes: d-h-px from global;
   margin-inline: 0 ;
   margin-block: var(--zd_size7) var(--zd_size8) ;
   border-bottom: 1px solid var(--zdt_toggledropdown_line_border);
 }
 .hiddenInput {
+  composes: d-absolute d-opacity-0 from global;
   width: 0 ;
   height: 0 ;
-  opacity: 0;
-  position: absolute;
 }
 .hiddenInputElement{
-  width: 100% ;
+  composes: d-p-0 d-w-full from global;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding: 0 ;
   border: 0;
 }
 .groupName {
@@ -96,5 +90,5 @@
   margin-block: var(--zd_size6) ;
 }
 .dropdown {
-  background-color: transparent;
+  composes: d-bg-transparent from global;
 }

package/es/dropdown/ToggleDropDown/__tests__/__snapshots__/ToggleDropDown.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ToggleDropDown rendering the defult props 1`] = `
 <DocumentFragment>
@@ -7,7 +7,7 @@ exports[`ToggleDropDown rendering the defult props 1`] = `
     data-selector-id="toggleDropdown"
   >
     <div
-      class="flex row alignItems_center"
+      class="d-flex d-flex-row d-items-center"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -16,7 +16,7 @@ exports[`ToggleDropDown rendering the defult props 1`] = `
         aria-expanded="false"
         aria-haspopup="true"
         aria-labelledby="1"
-        class="flex row alignItems_center buttonReset cursor effect default border defaultHover hoverEffect"
+        class="d-flex d-flex-row d-items-center effect default border defaultHover hoverEffect buttonReset cursor"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/es/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
+import { cn } from "@dot-system/css-utility";
 import style from "./CommonEmptyState.module.css";
 export default class CommonEmptyState extends Component {
   render() {
@@ -27,16 +28,16 @@ export default class CommonEmptyState extends Component {
       descriptionClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[size]} ${!isFluid ? style.fluid : ''} ${style[palette]}  ${className}`,
+      className: cn(`${style.container} ${style[size]} ${!isFluid ? style.fluid : ''} ${style[palette]}  ${className}`),
       "data-id": dataId,
       "data-test-id": dataId
     }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
       tabIndex: "0",
-      className: `${style.title} ${titleClass}`
+      className: cn(`${style.title} ${titleClass}`)
     }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
-      className: style.linkWrapper
+      className: cn(style.linkWrapper)
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${style.desc} ${descriptionClass}`
+      className: cn(`${style.desc} ${descriptionClass}`)
     }, description), !linkDescription && linkText ? /*#__PURE__*/React.createElement(Link, {
       href: linkUrl,
       className: style.link,
@@ -44,9 +45,9 @@ export default class CommonEmptyState extends Component {
       onClick: onUrlClick,
       dataId: `${dataId}_primarylink`
     }, linkText) : null) : null, linkDescription || !description && !linkDescription && linkText ? /*#__PURE__*/React.createElement("div", {
-      className: style.linkDescWrapper
+      className: cn(style.linkDescWrapper)
     }, linkDescription ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.linkDesc}`
+      className: cn(`${style.linkDesc}`)
     }, linkDescription) : null, linkText ? /*#__PURE__*/React.createElement(Link, {
       href: linkUrl,
       className: style.link,
@@ -54,14 +55,10 @@ export default class CommonEmptyState extends Component {
       onClick: onUrlClick,
       dataId: `${dataId}_secondarylink`
     }, linkText) : null) : null, children ? /*#__PURE__*/React.createElement("div", {
-      className: style.children
+      className: cn(style.children)
     }, children) : null);
   }
 
 }
 CommonEmptyState.propTypes = propTypes;
-CommonEmptyState.defaultProps = defaultProps; // if (__DOCS__) {
-//   CommonEmptyState.docs = {
-//     componentGroup: 'EmptyState'
-//   };
-// }
+CommonEmptyState.defaultProps = defaultProps;

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -6,7 +6,7 @@
 }
 .container {
   composes: varClass;
-  text-align: center;
+  composes: d-text-center from global;
 }
 [dir=ltr] .container {
   margin-left: auto ;
@@ -65,8 +65,8 @@
   line-height: 1.358;
 }
 .link {
+  composes: d-cursor-pointer from global;
   color: var(--linkColor);
-  cursor: pointer;
 }
 .link:hover {
   color: var(--linkHoverColor);

package/es/emptystate/CommonEmptyState/__tests__/__snapshots__/CommonEmptyState.spec.js.snap

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

package/es/emptystate/EditionPage/EditionPage.css

@@ -1,5 +1,5 @@
 .editionContainer {
-  text-align: center;
+  composes: d-text-center from global;
 }
 .svg {
   margin-top: var(--zd_size140) ;
@@ -20,11 +20,10 @@
   margin-inline:0 ;
 }
 .footer {
+  composes: d-inline-block d-relative from global;
   font-size: var(--zd_font_size13) ;
   margin-block: var(--zd_size10) var(--zd_size80) ;
   margin-inline:0 ;
-  position: relative;
-  display: inline-block;
 }
 .footer::before {
   content: '';
@@ -41,6 +40,6 @@
   left: calc( var(--zd_size20) * -1 ) ;
 }
 .button {
+  composes: d-cursor-pointer from global;
   color: var(--zdt_editionpage_primary_text);
-  cursor: pointer;
 }

package/es/emptystate/EditionPage/EditionPage.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import EmptyCrmPotential from '@zohodesk/svg/es/emptystate/version3/EmptyCrmPotential';
 import style from "./EditionPage.css";
+import { cn } from "@dot-system/css-utility";
 export default class EditionPage extends Component {
   constructor(props) {
     super(props);
@@ -20,28 +21,28 @@ export default class EditionPage extends Component {
       children
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.editionContainer,
+      className: cn(style.editionContainer),
       "data-id": dataId,
       "data-test-id": dataId
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.svg
+      className: cn(style.svg)
     }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
-      className: style.header
+      className: cn(style.header)
     }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
-      className: style.description
+      className: cn(style.description)
     }, subtitle) : null, /*#__PURE__*/React.createElement("div", {
-      className: style.description
+      className: cn(style.description)
     }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
-      className: style.button,
+      className: cn(style.button),
       "data-id": `${dataId}_button`,
       "data-test-id": `${dataId}_button`,
       onClick: onButtonClick
     }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
-      className: style.content
+      className: cn(style.content)
     }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_footerText`,
       "data-test-id": `${dataId}_footerText`,
-      className: style.footer
+      className: cn(style.footer)
     }, /*#__PURE__*/React.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: footerText
@@ -51,8 +52,4 @@ export default class EditionPage extends Component {
 
 }
 EditionPage.defaultProps = defaultProps;
-EditionPage.propTypes = propTypes; // if (__DOCS__) {
-//   EditionPage.docs = {
-//     componentGroup: 'EmptyState'
-//   };
-// }
+EditionPage.propTypes = propTypes;

package/es/emptystate/EditionPage/__tests__/__snapshots__/EditionPage.spec.js.snap

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

package/es/errorstate/EmptyStates.module.css

@@ -1,5 +1,7 @@
-.container, .tabletContainer {
-  text-align: center;
+.container,
+.tabletContainer {
+  composes: d-text-center from global;
+}.container, .tabletContainer {
   background-color: var(--zdt_emptystate_default_bg);
 }
 .container {
@@ -9,19 +11,13 @@
   padding-block-start: var(--zd_size50) ;
 }
 .top {
-  position: relative;
+  composes: d-relative from global;
 }
 .header {
+  composes: d-inline-block d-text-left from global;
   min-width: var(--zd_size400) ;
-  display: inline-block;
   margin: 0 auto ;
 }
-[dir=ltr] .header {
-  text-align: left;
-}
-[dir=rtl] .header {
-  text-align: right;
-}
 .title,
 .tabletTitle,
 .mobileTitle {
@@ -56,8 +52,7 @@
 }
 
 .footer {
-  display: inline-block;
-  text-align: center;
+  composes: d-inline-block d-text-center from global;
   margin: 0 auto ;
 }
 .footerWidth {

package/es/errorstate/Inconvenience/Inconvenience.js

@@ -5,6 +5,7 @@ import { Container, Box } from '@zohodesk/components/es/Layout';
 import LinkText from "../LinkText/LinkText";
 import InconvenienceSVG from '@zohodesk/svg/es/errorstate/version1/EmptyInconvenience';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { cn } from "@dot-system/css-utility";
 import commonStyle from "../EmptyStates.module.css";
 import style from "./Inconvenience.module.css";
 export default class Inconvenience extends React.Component {
@@ -50,9 +51,9 @@ export default class Inconvenience 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(InconvenienceSVG, {
@@ -61,7 +62,7 @@ export default class Inconvenience 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 Inconvenience extends React.Component {
 
 }
 Inconvenience.propTypes = propTypes;
-Inconvenience.defaultProps = defaultProps;
-
-if (__DOCS__) {
-  Inconvenience.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+Inconvenience.defaultProps = defaultProps;

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

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Inconvenience 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="inconvenience"
     data-selector-id="container"
     data-test-id="inconvenience"
   >
     <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="inconvenience_svg"
@@ -40,7 +40,7 @@ exports[`Inconvenience 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/LinkText/LinkText.js

@@ -22,8 +22,4 @@ export default class LinkText extends React.Component {
 
 }
 LinkText.propTypes = propTypes;
-LinkText.defaultProps = defaultProps; // if (__DOCS__) {
-//   LinkText.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+LinkText.defaultProps = defaultProps;

package/es/errorstate/LinkText/LinkText.module.css

@@ -1,6 +1,5 @@
 .text {
+  composes: d-inline-block d-cursor-pointer from global;
   color: var(--zdt_linktext_default_text);
-  display: inline-block;
   font-size: var(--zd_font_size15) ;
-  cursor: pointer;
 }

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

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

package/es/errorstate/NoRequestFound/NoRequestFound.js

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

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

@@ -1,28 +1,28 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`NoRequestFound 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="noRequestFound"
     data-selector-id="container"
     data-test-id="noRequestFound"
   >
     <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="noRequestFound_svg"
@@ -40,7 +40,7 @@ exports[`NoRequestFound 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/PermissionPlay/PermissionPlay.js

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