@zohodesk/dot 1.0.0-beta.265 → 1.0.0-beta.267

package/lib/avatar/AvatarUser/AvatarUser.module.css

@@ -6,7 +6,7 @@
 .paid,
 .portal,
 .delete {
-  font-size: 10px;
+  font-size: var(--zd_font_size10) ;
 }
 .paid,
 .portal,
@@ -19,22 +19,22 @@
   composes: middle from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .paid {
-  left: 50%;
+  left: 50% ;
 }
 [dir=rtl] .paid {
-  right: 50%;
+  right: 50% ;
 }
 .paid {
-  top: -2px;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 .portal, .lock {
   background-color: var(--zdt_avataruser_default_bg);
   border-radius: 50%;
 }
 .delete {
-  top: 0;
-  width: 100%;
-  height: 100%;
+  top: 0 ;
+  width: 100% ;
+  height: 100% ;
   opacity: 0;
   transition: all var(--zd_transition3);
   composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
@@ -44,128 +44,128 @@
   background-color: var(--zdt_avataruser_delete_bg);
 }
 [dir=ltr] .delete {
-  left: 0;
+  left: 0 ;
 }
 [dir=rtl] .delete {
-  right: 0;
+  right: 0 ;
 }
 .container:hover .delete {
   opacity: 1;
 }
 .small .portal {
-  top: 0;
+  top: 0 ;
 }
 [dir=ltr] .small .portal {
-  right: -4px;
+  right: calc( var(--zd_size4) * -1 ) ;
 }
 [dir=rtl] .small .portal {
-  left: -4px;
+  left: calc( var(--zd_size4) * -1 ) ;
 }
 .xsmall .portal {
-  top: 1px;
+  top: var(--zd_size1) ;
 }
 [dir=ltr] .xsmall .portal {
-  right: -2px;
+  right: calc( var(--zd_size2) * -1 ) ;
 }
 [dir=rtl] .xsmall .portal {
-  left: -2px;
+  left: calc( var(--zd_size2) * -1 ) ;
 }
 .medium .portal {
-  top: 1px;
+  top: var(--zd_size1) ;
 }
 [dir=ltr] .medium .portal {
-  right: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 [dir=rtl] .medium .portal {
-  left: -1px;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 .xmedium .portal {
-  top: 3px;
+  top: var(--zd_size3) ;
 }
 [dir=ltr] .xmedium .portal {
-  right: 0;
+  right: 0 ;
 }
 [dir=rtl] .xmedium .portal {
-  left: 0;
+  left: 0 ;
 }
 .large .portal {
-  top: 8px;
+  top: var(--zd_size8) ;
 }
 [dir=ltr] .large .portal {
-  right: 1px;
+  right: var(--zd_size1) ;
 }
 [dir=rtl] .large .portal {
-  left: 1px;
+  left: var(--zd_size1) ;
 }
 .xlarge .portal {
-  top: 15px;
+  top: var(--zd_size15) ;
 }
 [dir=ltr] .xlarge .portal {
-  right: 2px;
+  right: var(--zd_size2) ;
 }
 [dir=rtl] .xlarge .portal {
-  left: 2px;
+  left: var(--zd_size2) ;
 }
 
 .small .lock {
-  top: 0;
-  font-size: 11px;
+  top: 0 ;
+  font-size: var(--zd_font_size11) ;
 }
 
 [dir=ltr] .small .lock {
-  right: -5px;
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 
 [dir=rtl] .small .lock {
-  left: -5px;
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 .xsmall .lock {
-  top: 1px;
-  font-size: 12px;
+  top: var(--zd_size1) ;
+  font-size: var(--zd_font_size12) ;
 }
 [dir=ltr] .xsmall .lock {
-  right: -4px;
+  right: calc( var(--zd_size4) * -1 ) ;
 }
 [dir=rtl] .xsmall .lock {
-  left: -4px;
+  left: calc( var(--zd_size4) * -1 ) ;
 }
 .medium .lock {
-  top: 2px;
-  font-size: 13px;
+  top: var(--zd_size2) ;
+  font-size: var(--zd_font_size13) ;
 }
 [dir=ltr] .medium .lock {
-  right: -5px;
+  right: calc( var(--zd_size5) * -1 ) ;
 }
 [dir=rtl] .medium .lock {
-  left: -5px;
+  left: calc( var(--zd_size5) * -1 ) ;
 }
 .xmedium .lock {
-  top: 4px;
-  font-size: 14px;
+  top: var(--zd_size4) ;
+  font-size: var(--zd_font_size14) ;
 }
 [dir=ltr] .xmedium .lock {
-  right: -6px;
+  right: calc( var(--zd_size6) * -1 ) ;
 }
 [dir=rtl] .xmedium .lock {
-  left: -6px;
+  left: calc( var(--zd_size6) * -1 ) ;
 }
 .large .lock {
-  top: 6px;
-  font-size: 18px;
+  top: var(--zd_size6) ;
+  font-size: var(--zd_font_size18) ;
 }
 [dir=ltr] .large .lock {
-  right: -6px;
+  right: calc( var(--zd_size6) * -1 ) ;
 }
 [dir=rtl] .large .lock {
-  left: -6px;
+  left: calc( var(--zd_size6) * -1 ) ;
 }
 .xlarge .lock {
-  top: 12px;
-  font-size: 22px;
+  top: var(--zd_size12) ;
+  font-size: var(--zd_font_size22) ;
 }
 [dir=ltr] .xlarge .lock {
-  right: -8px;
+  right: calc( var(--zd_size8) * -1 ) ;
 }
 [dir=rtl] .xlarge .lock {
-  left: -8px;
+  left: calc( var(--zd_size8) * -1 ) ;
 }

package/lib/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -88,6 +88,7 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
         className: "".concat(_AvatarWithTeamModule["default"].container, " "),
         "data-id": "avatarWithTeamId",
+        "data-test-id": "avatarWithTeamId",
         "data-selector-id": dataSelectorId
       }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: name,
@@ -124,6 +125,7 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
       }, Avatar2Props)), teamName ? /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarWithTeamModule["default"].teamAvatar, " ").concat(teamClassName, " "),
         "data-id": "teamNameTestId",
+        "data-test-id": "teamNameTestId",
         "data-title": needTitle ? title : undefined
       }, /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: teamName,

package/lib/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -6,18 +6,18 @@
 
 .teamAvatar {
   position: absolute;
-  bottom: -6px;
-  font-size: 0;
-  padding: 2px;
+  bottom: calc( var(--zd_size6) * -1 ) ;
+  font-size: 0 ;
+  padding: var(--zd_size2) ;
   border-radius: 50%;
   transform: scale(0.8);
   background-color: var(--zdt_avatarwithteam_default_bg);
 }
 
 [dir=ltr] .teamAvatar {
-  right: -10px;
+  right: calc( var(--zd_size10) * -1 ) ;
 }
 
 [dir=rtl] .teamAvatar {
-  left: -10px;
+  left: calc( var(--zd_size10) * -1 ) ;
 }

package/lib/deprecated/FreezeLayer/_FreezeLayer.module.css

@@ -1,14 +1,14 @@
 .container {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   overflow: hidden;
 }[dir=ltr] .container {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }[dir=rtl] .container {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/lib/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -2,18 +2,18 @@
   position: relative;
   line-height: var(--zd_size18);
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  padding: 3px 15px;
+  padding: var(--zd_size3) var(--zd_size15) ;
   cursor: pointer;
 }[dir=ltr] .container {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }[dir=rtl] .container {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 .container:hover {
   background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
 }
 .departName {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   color: var(--zdt_selectdropdown_departname_text);
   composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -22,22 +22,22 @@
   cursor: pointer;
 }
 [dir=ltr] .departIcon {
-  margin-left: 5px;
+  margin-left: var(--zd_size5) ;
 }
 [dir=rtl] .departIcon {
-  margin-right: 5px;
+  margin-right: var(--zd_size5) ;
 }
 .rulesPopup {
-  max-height: 260px;
-  padding: 10px 0;
+  max-height: var(--zd_size260) ;
+  padding: var(--zd_size10) 0 ;
 }
 
 .rulesDepart {
-  margin: 0 5px 10px 5px;
+  margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5) ;
 }
 .searchDepart {
-  padding: 0 20px;
-  margin: 0 0 10px 0;
+  padding: 0 var(--zd_size20) ;
+  margin: 0 0 var(--zd_size10) 0 ;
 }
 
 /*Variables */

package/lib/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -1,33 +1,33 @@
 .wrapper {
   position: relative;
-  max-width: 100%;
+  max-width: 100% ;
 }
 .maxHgt {
-  max-height: 265px;
-  padding: 10px 0;
+  max-height: var(--zd_size265) ;
+  padding: var(--zd_size10) 0 ;
 }
 .responsivemaxHgt {
-  padding: 0;
+  padding: 0 ;
 }
 .title {
-  padding-top: 6px;
+  padding-top: var(--zd_size6) ;
 }
 [dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
-  padding: 0 0 0 5px;
+  padding: 0 0 0 var(--zd_size5) ;
 }
 [dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 5px 0 0;
+  padding: 0 var(--zd_size5) 0 0 ;
 }
 .overlay_arrow {
   position: absolute;
-  top: 50%;
+  top: 50% ;
   transform: translateY(-50%) perspective(1px);
 }
 [dir=ltr] .overlay_arrow {
-  left: 100%;
+  left: 100% ;
 }
 [dir=rtl] .overlay_arrow {
-  right: 100%;
+  right: 100% ;
 }
 .hoverIcon .arrow {
   opacity: 0;
@@ -43,10 +43,10 @@
   composes: dotted  offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
 .search {
-  padding: 6px 20px 0;
+  padding: var(--zd_size6) var(--zd_size20) 0 ;
 }
 .svgWrapper {
-  padding-bottom: 25px;
+  padding-bottom: var(--zd_size25) ;
 }
 .cursorDefault {
   cursor: default;
@@ -61,39 +61,39 @@
   text-align: right;
 }
 [dir=ltr] .iconBox {
-  margin-right: 4px;
+  margin-right: var(--zd_size4) ;
 }
 [dir=rtl] .iconBox {
-  margin-left: 4px;
+  margin-left: var(--zd_size4) ;
 }
 .iconBox > i {
   display: block;
 }
 .loader {
-  width: 40px;
-  margin: 0 auto;
+  width: var(--zd_size40) ;
+  margin: 0 auto ;
 }
 .seperatedLine {
-  height: 1px;
+  height: var(--zd_size1) ;
   border-bottom: 1px solid var(--zdt_toggledropdown_line_border);
-  margin: 7px 0 8px;
+  margin: var(--zd_size7) 0 var(--zd_size8) ;
 }
 .hiddenInput {
-  width: 0;
-  height: 0;
+  width: 0 ;
+  height: 0 ;
   opacity: 0;
   position: absolute;
 }
 .hiddenInputElement{
-  width: 100%;
+  width: 100% ;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding: 0;
+  padding: 0 ;
   border: 0;
 }
 .groupName {
-  margin: 6px 0;
+  margin: var(--zd_size6) 0 ;
 }
 .dropdown {
   background-color: transparent;

package/lib/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -79,7 +79,8 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
           descriptionClass = _customClass$descript === void 0 ? '' : _customClass$descript;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_CommonEmptyStateModule["default"].container, " ").concat(_CommonEmptyStateModule["default"][size], " ").concat(className, " ").concat(!isFluid ? _CommonEmptyStateModule["default"].fluid : '', " ").concat(_CommonEmptyStateModule["default"][palette]),
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass)
       }, title) : null, description ? /*#__PURE__*/_react["default"].createElement("div", {

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -9,25 +9,25 @@
   text-align: center;
 }
 [dir=ltr] .container {
-  margin-left: auto;
-  margin-right: auto;
+  margin-left: auto ;
+  margin-right: auto ;
 }
 [dir=rtl] .container {
-  margin-right: auto;
-  margin-left: auto;
+  margin-right: auto ;
+  margin-left: auto ;
 }
 .fluid {
-  max-width: 430px;
+  max-width: var(--zd_size430) ;
 }
 .title {
   font-family: var(--zd_semibold);
   color: var(--titleColor);
 }
 .small .title {
-  font-size: 16px;
+  font-size: var(--zd_font_size16) ;
 }
 .medium .title {
-  font-size: 20px;
+  font-size: var(--zd_font_size20) ;
 }
 .linkWrapper,
 .linkDescWrapper {
@@ -35,26 +35,26 @@
 }
 .small .linkWrapper,
 .small .linkDescWrapper {
-  font-size: 12px;
+  font-size: var(--zd_font_size12) ;
 }
 .medium .linkWrapper,
 .medium .linkDescWrapper {
-  font-size: 14px;
+  font-size: var(--zd_font_size14) ;
 }
 .medium .linkWrapper {
-  margin-top: 18px;
+  margin-top: var(--zd_size18) ;
 }
 .small .linkWrapper {
-  margin-top: 12px;
+  margin-top: var(--zd_size12) ;
 }
 .linkDescWrapper {
-  margin-top: 20px;
+  margin-top: var(--zd_size20) ;
 }
 [dir=ltr] .linkDesc, [dir=ltr] .desc {
-  margin-right: 4px;
+  margin-right: var(--zd_size4) ;
 }
 [dir=rtl] .linkDesc, [dir=rtl] .desc {
-  margin-left: 4px;
+  margin-left: var(--zd_size4) ;
 }
 .desc {
   line-height: var(--zd_size19);
@@ -68,7 +68,7 @@
   color: var(--linkHoverColor);
 }
 .children {
-  margin-top: 15px;
+  margin-top: var(--zd_size15) ;
 }
 
 .default {

package/lib/emptystate/EditionPage/EditionPage.css

@@ -2,40 +2,40 @@
   text-align: center;
 }
 .svg {
-  margin-top: 140px;
+  margin-top: var(--zd_size140) ;
 }
 .header {
-  font-size: 20px;
+  font-size: var(--zd_font_size20) ;
   font-family: var(--zd_semibold);
-  margin-top: 16px;
+  margin-top: var(--zd_size16) ;
 }
 .description {
-  font-size: 15px;
+  font-size: var(--zd_font_size15) ;
   font-family: var(--zd_semibold);
-  margin: 20px 0;
+  margin: var(--zd_size20) 0 ;
 }
 .content {
-  margin: 10px 0;
+  margin: var(--zd_size10) 0 ;
 }
 .footer {
-  font-size: 13px;
+  font-size: var(--zd_font_size13) ;
   position: relative;
   display: inline-block;
-  margin: 10px 0 80px 0;
+  margin: var(--zd_size10) 0 var(--zd_size80) 0 ;
 }
 .footer::before {
   content: '';
   position: absolute;
-  top: -10px;
+  top: calc( var(--zd_size10) * -1 ) ;
   border-top: var(--zd_size1) solid var(--zdt_editionpage_footer_text);
 }
 [dir=ltr] .footer::before {
-  left: -20px;
-  right: -20px;
+  left: calc( var(--zd_size20) * -1 ) ;
+  right: calc( var(--zd_size20) * -1 ) ;
 }
 [dir=rtl] .footer::before {
-  right: -20px;
-  left: -20px;
+  right: calc( var(--zd_size20) * -1 ) ;
+  left: calc( var(--zd_size20) * -1 ) ;
 }
 .button {
   color: var(--zdt_editionpage_primary_text);

package/lib/emptystate/EditionPage/EditionPage.js

@@ -68,7 +68,8 @@ var EditionPage = /*#__PURE__*/function (_Component) {
           children = _this$props.children;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _EditionPage["default"].editionContainer,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _EditionPage["default"].svg
       }, /*#__PURE__*/_react["default"].createElement(_EmptyCrmPotential["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
@@ -80,11 +81,13 @@ var EditionPage = /*#__PURE__*/function (_Component) {
       }, information ? "".concat(information, " ") : null, butttonText ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _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
       }, children) : null, footerText ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_footerText"),
+        "data-test-id": "".concat(dataId, "_footerText"),
         className: _EditionPage["default"].footer
       }, /*#__PURE__*/_react["default"].createElement("div", {
         dangerouslySetInnerHTML: {