@zohodesk/dot 1.0.0-temp-150 → 1.0.0-temp-151

package/es/ToastMessage/ToastMessage.module.css

@@ -5,7 +5,7 @@
   border-radius: 5px;
   box-shadow: var(--zd_bs_toastmessage_container);
   background-color: var(--zdt_toastmessage_default_bg);
-  margin-bottom: 7px;
+  margin-bottom: var(--zd_size7);
 }[dir=ltr] .container {
   transform-origin: right center;
 }[dir=rtl] .container {
@@ -65,7 +65,7 @@
 }
 
 .alertright {
-  width: 105px;
+  width: var(--zd_size105);
 }
 
 [dir=ltr] .alertright {
@@ -77,7 +77,7 @@
 }
 
 .popbutton {
-  font-size: 10px;
+  font-size: var(--zd_font_size10);
   color: var(--zdt_toastmessage_popbutton_text);
   composes: wbreak textCap from '~@zohodesk/components/lib/common/common.module.css';
   transition: all var(--zd_transition3);
@@ -87,7 +87,7 @@
 
 .mainbutton {
   composes: popbutton;
-  font-size: 11px;
+  font-size: var(--zd_font_size11);
 }
 
 .sumbitBorder {
@@ -147,11 +147,11 @@
 }
 
 .alertleft {
-  padding: 15px 25px;
+  padding: var(--zd_size15) var(--zd_size25);
 }
 
 .alertico {
-  min-width: 50px;
+  min-width: var(--zd_size50);
 }
 
 .alertsecondary .alertico {
@@ -162,31 +162,31 @@
 
 .alertTitle {
   composes: semibold wbreak dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: 14px;
+  font-size: var(--zd_font_size14);
   color: var(--zdt_toastmessage_alerttitle_text);
 }
 
 [dir=ltr] .alertTitleLeft {
-  margin-right: 10px;
+  margin-right: var(--zd_size10);
 }
 
 [dir=rtl] .alertTitleLeft {
-  margin-left: 10px;
+  margin-left: var(--zd_size10);
 }
 
 .alertMessage {
-  font-size: 12px;
+  font-size: var(--zd_font_size12);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size16);
   color: var(--zdt_toastmessage_alert_text);
-  margin-top: 5px;
+  margin-top: var(--zd_size5);
 }
 
 .buttonText {
   font-size: inherit;
   line-height: var(--zd_size14);
   text-align: center;
-  padding: 0 7px;
+  padding: 0 var(--zd_size7);
   cursor: pointer;
 }
 
@@ -199,7 +199,7 @@
 }
 
 .closeIcon, .closeIconPrimary {
-  padding: 2px;
+  padding: var(--zd_size2);
   cursor: pointer;
 }
 
@@ -226,7 +226,7 @@
 }
 
 .dropdown {
-  width: 23px;
+  width: var(--zd_size23);
   position: relative;
   height: 100%;
   color: var(--zdt_toastmessage_dropdown_text);
@@ -255,9 +255,9 @@
 .message {
   position: relative;
   color: var(--zdt_toastmessage_popbutton_text);
-  font-size: 11px;
+  font-size: var(--zd_font_size11);
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
-  height: 33px;
+  height: var(--zd_size33);
   transition: padding var(--zd_transition3), height var(--zd_transition3);
   border-top: 1px solid var(--zdt_toastmessage_message_border);
   cursor: pointer;
@@ -265,11 +265,11 @@
 }
 
 [dir=ltr] .message {
-  padding: 10px 20px 10px 76px;
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
 }
 
 [dir=rtl] .message {
-  padding: 10px 76px 10px 20px;
+  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
 }
 
 .messageOff {
@@ -279,11 +279,11 @@
 }
 
 [dir=ltr] .messageOff {
-  padding: 0 20px 0 76px;
+  padding: 0 var(--zd_size20) 0 var(--zd_size76);
 }
 
 [dir=rtl] .messageOff {
-  padding: 0 76px 0 20px;
+  padding: 0 var(--zd_size76) 0 var(--zd_size20);
 }
 
 .message:hover {
@@ -291,8 +291,8 @@
 }
 
 .fill {
-  width: 29px;
-  height: 29px;
+  width: var(--zd_size29);
+  height: var(--zd_size29);
   line-height: var(--zd_size29);
   composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
   text-align: center;
@@ -313,7 +313,7 @@
 .dangerShadow {
   color: var(--zdt_toastmessage_danger_text);
   text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
-  margin-top: 5px;
+  margin-top: var(--zd_size5);
 }
 
 .successPlain {

package/es/Upload/Upload.module.css

@@ -3,7 +3,7 @@
   transition: all var(--zd_transition3);
   vertical-align: middle;
   cursor: pointer;
-  padding: 5px;
+  padding: var(--zd_size5);
   border-radius: var(--zd_size2);
 }
 .light {
@@ -27,12 +27,12 @@
   left: 0;
 }
 .small {
-  width: 50px;
-  height: 40px;
+  width: var(--zd_size50);
+  height: var(--zd_size40);
 }
 .medium {
-  height: 49px;
-  width: 65px;
+  height: var(--zd_size49);
+  width: var(--zd_size65);
 }
 .preview {
   opacity: 0.4;
@@ -40,8 +40,8 @@
 }
 .loader {
   position: absolute;
-  bottom: -1px;
-  height: 2px;
+  bottom: calc(var(--zd_size1) * -1);
+  height: var(--zd_size2);
   width: 0%;
   transition: width var(--zd_transition6) ease;
 }
@@ -62,20 +62,20 @@
   height: 100%;
 }
 [dir=ltr] .attachInfo {
-  padding: 4px 0 0 8px;
+  padding: var(--zd_size4) 0 0 var(--zd_size8);
 }
 [dir=rtl] .attachInfo {
-  padding: 4px 8px 0 0;
+  padding: var(--zd_size4) var(--zd_size8) 0 0;
 }
 .fileIcon {
-  font-size: 14px;
+  font-size: var(--zd_font_size14);
 }
 .attachsize {
-  font-size: 10px;
+  font-size: var(--zd_font_size10);
   letter-spacing: 1px;
   composes: dotted from "~@zohodesk/components/lib/common/common.module.css";
   text-transform: uppercase;
-  padding: 4px 0 2px;
+  padding: var(--zd_size4) 0 var(--zd_size2);
 }
 .light .attachsize {
   color: var(--zdt_upload_attachsize_default_text);
@@ -84,12 +84,12 @@
   color: var(--zdt_upload_attachsize_night_text);
 }
 .uploadclose {
-  height: 12px;
-  width: 12px;
+  height: var(--zd_size12);
+  width: var(--zd_size12);
   top: 0;
   position: absolute;
   line-height: var(--zd_size10);
-  font-size: 12px;
+  font-size: var(--zd_font_size12);
   text-align: center;
 }
 [dir=ltr] .uploadclose {

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -1,26 +1,26 @@
 .container {
-  min-height: 54px;
+  min-height: var(--zd_size54);
   position: relative;
 }[dir=ltr] .container {
-  padding: 12px 45px 12px 26px;
+  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26);
 }[dir=rtl] .container {
-  padding: 12px 26px 12px 45px;
+  padding: var(--zd_size12) var(--zd_size26) var(--zd_size12) var(--zd_size45);
 }
 
 [dir=ltr] .extraSmall {
-  padding: 12px 45px 12px 16px;
+  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
 }
 
 [dir=rtl] .extraSmall {
-  padding: 12px 16px 12px 45px;
+  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
 }
 
 [dir=ltr] .iconContainer {
-  margin: 0 10px 0 0;
+  margin: 0 var(--zd_size10) 0 0;
 }
 
 [dir=rtl] .iconContainer {
-  margin: 0 0 0 10px;
+  margin: 0 0 0 var(--zd_size10);
 }
 
 .title {
@@ -28,11 +28,11 @@
 }
 
 [dir=ltr] .title {
-  margin: 0 5px 0 0;
+  margin: 0 var(--zd_size5) 0 0;
 }
 
 [dir=rtl] .title {
-  margin: 0 0 0 5px;
+  margin: 0 0 0 var(--zd_size5);
 }
 
 .iconStyle {
@@ -56,16 +56,16 @@
 /* icon size */
 
 .icon_delete, .icon_alert, .icon_remoteAssist {
-  font-size: 20px;
+  font-size: var(--zd_font_size20);
 }
 
 .icon_splitTicket {
-  font-size: 16px;
+  font-size: var(--zd_font_size16);
   font-weight: bold;
 }
 
 .icon_update {
-  font-size: 16px;
+  font-size: var(--zd_font_size16);
 }
 
 .text_danger {

package/es/alert/AlertLookup/AlertLookup.module.css

@@ -5,23 +5,23 @@
 .innerSection {
   line-height: var(--zd_size25);
   color: var(--zdt_alertlookup_innersection_text);
-  font-size: 15px;
+  font-size: var(--zd_font_size15);
   word-break: break-word;
-  padding: 30px 20px 20px;
+  padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
 }
 
 [dir=ltr] .buttonGap {
-  margin: 0 0 0 12px;
+  margin: 0 0 0 var(--zd_size12);
 }
 
 [dir=rtl] .buttonGap {
-  margin: 0 12px 0 0;
+  margin: 0 var(--zd_size12) 0 0;
 }
 
 .text {
-  margin-top: 20px;
+  margin-top: var(--zd_size20);
 }
 
 .extraSmall .innerSection {
-  padding: 30px 16px 46px;
+  padding: var(--zd_size30) var(--zd_size16) var(--zd_size46);
 }

package/es/avatar/AvatarClose/AvatarClose.module.css

@@ -28,7 +28,7 @@
 .icon {
   position: absolute;
   line-height: 0;
-  font-size: 16px;
+  font-size: var(--zd_font_size16);
   composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
 }
 .container:hover .pop {

package/es/avatar/AvatarCollision/AvatarCollision.module.css

@@ -3,7 +3,7 @@
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
   border-radius: 50%;
-  padding: 2px;
+  padding: var(--zd_size2);
 }
 .on {
   border: 1px solid var(--zdt_avatarcollision_on_border);
@@ -40,7 +40,7 @@
   line-height: 0;
   composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
   color: var(--zdt_avatarcollision_icon_text);
-  font-size: 13px;
+  font-size: var(--zd_font_size13);
 }
 .container:hover .pop {
   opacity: 1;
@@ -51,19 +51,19 @@
   content: '';
   position: absolute;
   top: 50%;
-  height: 4px;
+  height: var(--zd_size4);
   border: 1px solid var(--zdt_avatarcollision_off_after_border);
   background-color: var(--zdt_avatarcollision_off_after_bg);
 }
 
 [dir=ltr] .off::after {
-  left: -5px;
-  right: -5px;
+  left: calc(var(--zd_size5) * -1);
+  right: calc(var(--zd_size5) * -1);
   transform: translateY(-50%) rotate(130deg);
 }
 
 [dir=rtl] .off::after {
-  right: -5px;
-  left: -5px;
+  right: calc(var(--zd_size5) * -1);
+  left: calc(var(--zd_size5) * -1);
   transform: translateY(-50%) rotate(-130deg);
 }

package/es/avatar/AvatarStatus/AvatarStatus.module.css

@@ -33,33 +33,33 @@
 
 .small.state,
 .xsmall.state {
-  width: 7px;
-  height: 7px;
+  width: var(--zd_size7);
+  height: var(--zd_size7);
 }
 .medium.state,
 .xmedium.state {
-  width: 9px;
-  height: 9px;
+  width: var(--zd_size9);
+  height: var(--zd_size9);
 }
 .large.state,
 .xlarge.state {
-  width: 12px;
-  height: 12px;
+  width: var(--zd_size12);
+  height: var(--zd_size12);
 }
 
 .small.circle.state {
-  bottom: 1px;
+  bottom: var(--zd_size1);
 }
 
 [dir=ltr] .small.circle.state {
-  right: -1px;
+  right: calc(var(--zd_size1) * -1);
 }
 
 [dir=rtl] .small.circle.state {
-  left: -1px;
+  left: calc(var(--zd_size1) * -1);
 }
 .xsmall.circle.state {
-  bottom: 3px;
+  bottom: var(--zd_size3);
 }
 [dir=ltr] .xsmall.circle.state {
   right: 0;
@@ -69,7 +69,7 @@
 }
 .medium.circle.state,
 .xmedium.circle.state {
-  bottom: 3px;
+  bottom: var(--zd_size3);
 }
 [dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
   right: 0;
@@ -78,69 +78,69 @@
   left: 0;
 }
 .large.circle.state {
-  bottom: 7px;
+  bottom: var(--zd_size7);
 }
 [dir=ltr] .large.circle.state {
-  right: 1px;
+  right: var(--zd_size1);
 }
 [dir=rtl] .large.circle.state {
-  left: 1px;
+  left: var(--zd_size1);
 }
 .xlarge.circle.state {
-  bottom: 6px;
+  bottom: var(--zd_size6);
 }
 [dir=ltr] .xlarge.circle.state {
-  right: 8px;
+  right: var(--zd_size8);
 }
 [dir=rtl] .xlarge.circle.state {
-  left: 8px;
+  left: var(--zd_size8);
 }
 
 .small.square.state {
-  bottom: -1px;
+  bottom: calc(var(--zd_size1) * -1);
 }
 
 [dir=ltr] .small.square.state {
-  right: -1px;
+  right: calc(var(--zd_size1) * -1);
 }
 
 [dir=rtl] .small.square.state {
-  left: -1px;
+  left: calc(var(--zd_size1) * -1);
 }
 .xsmall.square.state {
-  bottom: -1px;
+  bottom: calc(var(--zd_size1) * -1);
 }
 [dir=ltr] .xsmall.square.state {
-  right: -2px;
+  right: calc(var(--zd_size2) * -1);
 }
 [dir=rtl] .xsmall.square.state {
-  left: -2px;
+  left: calc(var(--zd_size2) * -1);
 }
 .medium.square.state,
 .xmedium.square.state {
-  bottom: -2px;
+  bottom: calc(var(--zd_size2) * -1);
 }
 [dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
-  right: -4px;
+  right: calc(var(--zd_size4) * -1);
 }
 [dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
-  left: -4px;
+  left: calc(var(--zd_size4) * -1);
 }
 .large.square.state {
-  bottom: -2px;
+  bottom: calc(var(--zd_size2) * -1);
 }
 [dir=ltr] .large.square.state {
-  right: -5px;
+  right: calc(var(--zd_size5) * -1);
 }
 [dir=rtl] .large.square.state {
-  left: -5px;
+  left: calc(var(--zd_size5) * -1);
 }
 .xlarge.square.state {
-  bottom: -3px;
+  bottom: calc(var(--zd_size3) * -1);
 }
 [dir=ltr] .xlarge.square.state {
-  right: -5px;
+  right: calc(var(--zd_size5) * -1);
 }
 [dir=rtl] .xlarge.square.state {
-  left: -5px;
+  left: calc(var(--zd_size5) * -1);
 }

package/es/avatar/AvatarThread/AvatarThread.module.css

@@ -21,65 +21,65 @@
 .thread_xsmall_pos,
 .thread_medium_pos,
 .thread_xmedium_pos {
-  height: 15px;
-  width: 15px;
+  height: var(--zd_size15);
+  width: var(--zd_size15);
 }
 
 .thread_xsmall_pos {
-  top: -5px;
+  top: calc(var(--zd_size5) * -1);
 }
 
 [dir=ltr] .thread_xsmall_pos {
-  right: -5px;
+  right: calc(var(--zd_size5) * -1);
 }
 
 [dir=rtl] .thread_xsmall_pos {
-  left: -5px;
+  left: calc(var(--zd_size5) * -1);
 }
 .thread_small_pos {
-  top: -3px;
-  height: 12px;
-  width: 12px;
+  top: calc(var(--zd_size3) * -1);
+  height: var(--zd_size12);
+  width: var(--zd_size12);
 }
 [dir=ltr] .thread_small_pos {
-  right: -6px;
+  right: calc(var(--zd_size6) * -1);
 }
 [dir=rtl] .thread_small_pos {
-  left: -6px;
+  left: calc(var(--zd_size6) * -1);
 }
 
 .thread_small_pos i {
-  font-size: 8px;
+  font-size: var(--zd_font_size8);
 }
 
 .thread_medium_pos {
-  top: -4px;
+  top: calc(var(--zd_size4) * -1);
 }
 
 [dir=ltr] .thread_medium_pos {
-  right: -5px;
+  right: calc(var(--zd_size5) * -1);
 }
 
 [dir=rtl] .thread_medium_pos {
-  left: -5px;
+  left: calc(var(--zd_size5) * -1);
 }
 
 .thread_xmedium_pos {
-  top: -4px;
+  top: calc(var(--zd_size4) * -1);
 }
 
 [dir=ltr] .thread_xmedium_pos {
-  right: -3px;
+  right: calc(var(--zd_size3) * -1);
 }
 
 [dir=rtl] .thread_xmedium_pos {
-  left: -3px;
+  left: calc(var(--zd_size3) * -1);
 }
 
 .thread_large_pos {
   top: 0;
-  height: 16px;
-  width: 16px;
+  height: var(--zd_size16);
+  width: var(--zd_size16);
 }
 
 [dir=ltr] .thread_large_pos {
@@ -91,17 +91,17 @@
 }
 
 .thread_xlarge_pos {
-  top: 2px;
-  height: 18px;
-  width: 18px;
+  top: var(--zd_size2);
+  height: var(--zd_size18);
+  width: var(--zd_size18);
 }
 
 [dir=ltr] .thread_xlarge_pos {
-  right: 4px;
+  right: var(--zd_size4);
 }
 
 [dir=rtl] .thread_xlarge_pos {
-  left: 4px;
+  left: var(--zd_size4);
 }
 
 .icon {