@zohodesk/dot 1.9.18 → 1.9.20

package/lib/deprecated/SelectDropdown/SelectDropdown.js

@@ -27,6 +27,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _SelectDropdownModule = _interopRequireDefault(require("./SelectDropdown.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -115,13 +117,13 @@ var SelectDropdown = /*#__PURE__*/function (_React$Component) {
           options = _suggestions$options === void 0 ? [] : _suggestions$options;
       return /*#__PURE__*/_react["default"].createElement("span", {
         ref: getTargetRef,
-        className: _SelectDropdownModule["default"].container,
+        className: (0, _cssUtility.cn)(_SelectDropdownModule["default"].container),
         onClick: removeClose
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SelectDropdownModule["default"].departName,
+        className: (0, _cssUtility.cn)(_SelectDropdownModule["default"].departName),
         onClick: this.handleTogglePopup
       }, selectedText), /*#__PURE__*/_react["default"].createElement("span", {
-        className: _SelectDropdownModule["default"].departIcon,
+        className: (0, _cssUtility.cn)(_SelectDropdownModule["default"].departIcon),
         onClick: this.handleTogglePopup
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down1",

package/lib/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/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -39,6 +39,8 @@ var _Common = require("@zohodesk/components/es/utils/Common");
 
 var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
 var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/es/RippleEffect/RippleEffect"));
@@ -637,7 +639,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
       var ariaTitleId = this.getAriaId(); // const allyOptionsArr = this.getOptionsArray();
 
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: _ToggleDropDownModule["default"].wrapper,
+        className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].wrapper),
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
         onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
         "data-selector-id": dataSelectorId
@@ -783,9 +785,9 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
             key: "index".concat(groupName)
           }, needDivider && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _ToggleDropDownModule["default"].seperatedLine
+            className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].seperatedLine)
           }), groupName && /*#__PURE__*/_react["default"].createElement("div", {
-            className: _ToggleDropDownModule["default"].groupName
+            className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].groupName)
           }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
             text: groupName,
             palette: palette,
@@ -882,7 +884,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
             key: i
           }, needDivider ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: _ToggleDropDownModule["default"].seperatedLine
+            className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].seperatedLine)
           }) : iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             dataId: item[keyName],
             value: item[keyName],
@@ -947,7 +949,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           size: "small",
           getEmptyState: _this5.emptySearchSVG
         }) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ToggleDropDownModule["default"].loader
+          className: (0, _cssUtility.cn)(_ToggleDropDownModule["default"].loader)
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getFooter()) : null));
       }) : null);
     }
@@ -961,11 +963,6 @@ ToggleDropDown.defaultProps = _defaultProps.defaultProps;
 ToggleDropDown.propTypes = _propTypes.propTypes;
 var ToggleDropDown_Component = (0, _Popup["default"])(ToggleDropDown);
 ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
-ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
-//   ToggleDropDown.docs = {
-//     componentGroup: 'Molecule'
-//   };
-// }
-
+ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes;
 var _default = ToggleDropDown_Component;
 exports["default"] = _default;

package/lib/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/lib/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/lib/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -15,6 +15,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Link = _interopRequireDefault(require("../../Link/Link"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _CommonEmptyStateModule = _interopRequireDefault(require("./CommonEmptyState.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -78,16 +80,16 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
           _customClass$descript = customClass.descriptionClass,
           descriptionClass = _customClass$descript === void 0 ? '' : _customClass$descript;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_CommonEmptyStateModule["default"].container, " ").concat(_CommonEmptyStateModule["default"][size], " ").concat(!isFluid ? _CommonEmptyStateModule["default"].fluid : '', " ").concat(_CommonEmptyStateModule["default"][palette], "  ").concat(className),
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].container, " ").concat(_CommonEmptyStateModule["default"][size], " ").concat(!isFluid ? _CommonEmptyStateModule["default"].fluid : '', " ").concat(_CommonEmptyStateModule["default"][palette], "  ").concat(className)),
         "data-id": dataId,
         "data-test-id": dataId
       }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/_react["default"].createElement("div", {
         tabIndex: "0",
-        className: "".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass)
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass))
       }, title) : null, description ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _CommonEmptyStateModule["default"].linkWrapper
+        className: (0, _cssUtility.cn)(_CommonEmptyStateModule["default"].linkWrapper)
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_CommonEmptyStateModule["default"].desc, " ").concat(descriptionClass)
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].desc, " ").concat(descriptionClass))
       }, description), !linkDescription && linkText ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: linkUrl,
         className: _CommonEmptyStateModule["default"].link,
@@ -95,9 +97,9 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
         onClick: onUrlClick,
         dataId: "".concat(dataId, "_primarylink")
       }, linkText) : null) : null, linkDescription || !description && !linkDescription && linkText ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _CommonEmptyStateModule["default"].linkDescWrapper
+        className: (0, _cssUtility.cn)(_CommonEmptyStateModule["default"].linkDescWrapper)
       }, linkDescription ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_CommonEmptyStateModule["default"].linkDesc)
+        className: (0, _cssUtility.cn)("".concat(_CommonEmptyStateModule["default"].linkDesc))
       }, linkDescription) : null, linkText ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         href: linkUrl,
         className: _CommonEmptyStateModule["default"].link,
@@ -105,7 +107,7 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
         onClick: onUrlClick,
         dataId: "".concat(dataId, "_secondarylink")
       }, linkText) : null) : null, children ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _CommonEmptyStateModule["default"].children
+        className: (0, _cssUtility.cn)(_CommonEmptyStateModule["default"].children)
       }, children) : null);
     }
   }]);
@@ -115,8 +117,4 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
 
 exports["default"] = CommonEmptyState;
 CommonEmptyState.propTypes = _propTypes.propTypes;
-CommonEmptyState.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   CommonEmptyState.docs = {
-//     componentGroup: 'EmptyState'
-//   };
-// }
+CommonEmptyState.defaultProps = _defaultProps.defaultProps;

package/lib/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/lib/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/lib/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/lib/emptystate/EditionPage/EditionPage.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
@@ -67,28 +69,28 @@ var EditionPage = /*#__PURE__*/function (_Component) {
           butttonText = _this$props.butttonText,
           children = _this$props.children;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].editionContainer,
+        className: (0, _cssUtility.cn)(_EditionPage["default"].editionContainer),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].svg
+        className: (0, _cssUtility.cn)(_EditionPage["default"].svg)
       }, /*#__PURE__*/_react["default"].createElement(_EmptyCrmPotential["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].header
+        className: (0, _cssUtility.cn)(_EditionPage["default"].header)
       }, title), subtitle ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].description
+        className: (0, _cssUtility.cn)(_EditionPage["default"].description)
       }, subtitle) : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].description
+        className: (0, _cssUtility.cn)(_EditionPage["default"].description)
       }, information ? "".concat(information, " ") : null, butttonText ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _EditionPage["default"].button,
+        className: (0, _cssUtility.cn)(_EditionPage["default"].button),
         "data-id": "".concat(dataId, "_button"),
         "data-test-id": "".concat(dataId, "_button"),
         onClick: onButtonClick
       }, butttonText) : null), children ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _EditionPage["default"].content
+        className: (0, _cssUtility.cn)(_EditionPage["default"].content)
       }, children) : null, footerText ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_footerText"),
         "data-test-id": "".concat(dataId, "_footerText"),
-        className: _EditionPage["default"].footer
+        className: (0, _cssUtility.cn)(_EditionPage["default"].footer)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         dangerouslySetInnerHTML: {
           __html: footerText
@@ -102,8 +104,4 @@ var EditionPage = /*#__PURE__*/function (_Component) {
 
 exports["default"] = EditionPage;
 EditionPage.defaultProps = _defaultProps.defaultProps;
-EditionPage.propTypes = _propTypes.propTypes; // if (__DOCS__) {
-//   EditionPage.docs = {
-//     componentGroup: 'EmptyState'
-//   };
-// }
+EditionPage.propTypes = _propTypes.propTypes;

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

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

@@ -73,8 +73,4 @@ var LinkText = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = LinkText;
 LinkText.propTypes = _propTypes.propTypes;
-LinkText.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   LinkText.docs = {
-//     componentGroup: 'errorStates'
-//   };
-// }
+LinkText.defaultProps = _defaultProps.defaultProps;

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

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