@zohodesk/components 1.6.28 → 1.6.29

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,6 @@
 .buttonReset {
-  outline: 0;
+  composes: d-p-0 d-bg-inherit d-text-inherit d-outline-0 from global;
   font: inherit;
-  color: inherit;
   border: inherit;
-  background-color: inherit;
-  padding: 0 ;
   text-align: inherit;
 }

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -53,8 +53,8 @@
 }
 
 .hasBorder {
+    composes: d-border-solid from global;
     transition: border var(--zd_transition2) linear 0s;
-    border-style: solid;
 }
 
 .padding_small,

package/es/v1/Button/css/Button_v1.module.css

@@ -19,6 +19,7 @@
 .button {
     composes: varClass;
     composes: posrel pointer from '../../../common/common.module.css';
+    composes: d-bg-none from global;
     padding-block: var(--local-button-padding-block);
     padding-inline: var(--local-button-padding-inline);
     height: var(--local-button-height);
@@ -114,8 +115,7 @@
 
 .overlayHidden {
     composes: contentWrapper;
-    visibility: hidden;
-    opacity: 0;
+    composes: d-invisible d-opacity-0 from global;
 }
 
 .strike::after {

package/es/v1/Label/css/Label_v1.module.css

@@ -1,6 +1,6 @@
 .container {
+    composes: d-max-w-full from global;
     --local-label-cursor: pointer;
-    max-width: 100% ;
 }
 .label {
     /*css:theme-validation:ignore*/

package/es/v1/Switch/css/Switch_v1.module.css

@@ -60,15 +60,14 @@
     --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
 }
 .trackWrapper {
-    position: relative;
+    composes: d-relative from global;
 }
 .disabled > .trackWrapper {
     opacity: 0.4;
 }
 .track {
+    composes: d-block d-relative from global;
     appearance: none;
-    display: block;
-    position: relative;
     height: var(--local-switch-track-height);
     width: var(--local-switch-track-width);
     margin: 0 ;
@@ -77,9 +76,7 @@
     cursor: var(--local-switch-cursor);
 }
 .commonSvg {
-    display: block;
-    position: absolute;
-    pointer-events: none;
+    composes: d-block d-absolute d-pointer-events-none from global;
     top: 50% ;
 }
 .thumb {
@@ -96,7 +93,7 @@
     right: var(--zd_size1) ;
 }
 .label {
-    max-width: 100% ;
+    composes: d-max-w-full from global;
     cursor: var(--local-switch-cursor);
 }
 .onLabel {

package/es/v1/shared/Spinner/Spinner_v1.module.css

@@ -1,19 +1,17 @@
 .spinner {
+    composes: d-block from global;
     width: var(--local-loader-size, var(--zd_size16));
     height: var(--local-loader-size, var(--zd_size16));
-    display: block;
 }
 
 .spinnerTrack {
-    fill: none;
-    stroke: currentColor;
+    composes: d-fill-none d-stroke-current from global;
     opacity: 0.2;
     stroke-width: 3px;
 }
 
 .spinnerHead {
-    fill: none;
-    stroke: currentColor;
+    composes: d-fill-none d-stroke-current from global;
     stroke-width: 3px;
     stroke-linecap: round;
     stroke-dasharray: 60;

package/es/v1/shared/SuccessTick/SuccessTick_v1.module.css

@@ -1,11 +1,10 @@
 .tick {
+    composes: d-fill-none d-stroke-current from global;
     width: var(--local-tick-size, var(--zd_size16));
     height: var(--local-tick-size, var(--zd_size16));
-    stroke: currentColor;
     stroke-width: 2.5px;
     stroke-linecap: round;
     stroke-linejoin: round;
-    fill: none;
     stroke-dasharray: 24;
     stroke-dashoffset: 24;
 }[dir=ltr] .tick {

package/lib/Avatar/Avatar.module.css

@@ -14,9 +14,8 @@
 
 .avatar {
   composes: varClass;
-  position: relative;
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
   font-size: var(--avatar_font_size);
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
@@ -36,11 +35,8 @@
 }
 
 .shadow {
-  position: absolute;
-  height: 100% ;
-  width: 100% ;
+  composes: d-absolute d-size-full d-pointer-events-none from global;
   top: 0 ;
-  pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
@@ -69,9 +65,7 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
@@ -120,7 +114,7 @@
 }
 
 .none {
-  display: none;
+  composes: d-hidden from global;
 }
 
 .default {
@@ -136,8 +130,8 @@
 }
 
 .initial {
+  composes: d-inline-block from global;
   text-transform: var(--avatar_text_transform);
-  display: inline-block;
 }
 
 .xxsmall {

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -16,10 +16,8 @@
   --avatarteam_top_top: var(--zd_size1);
 }
 .container {
-  position: relative;
-  display: inline-block;
+  composes: d-inline-block d-relative d-align-middle from global;
   font-size: 0 ;
-  vertical-align: middle;
 }
 .team {
   composes: varClass;

package/lib/Button/css/Button.module.css

@@ -46,7 +46,7 @@
 .container {
   composes: native;
   composes: dotted from '../../common/common.module.css';
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
   font-weight: var(--button_font_weight);
@@ -94,17 +94,17 @@
 }
 
 .mediumBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size42);
   --button_min_width: var(--zd_size42);
   --button_font_size: var(--zd_font_size10);
-  text-align: center;
 }
 
 .smallBtn {
+  composes: d-text-center from global;
   --button_height: var(--zd_size22);
   --button_min_width: var(--zd_size22);
   --button_font_size: var(--zd_font_size13);
-  text-align: center;
 }
 
 .smallBtnprimary,
@@ -272,10 +272,10 @@
 }
 
 .overlay {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
-  background: inherit;
+  background-color: inherit;
   border-radius: inherit;
 }
 
@@ -290,7 +290,7 @@
 }
 
 .loading {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   width: var(--zd_size20) ;
   height: var(--zd_size20) ;
@@ -311,12 +311,10 @@
 }
 
 .loadingelement {
+  composes: d-inline-block d-relative d-origin-center from global;
   height: inherit ;
   width: inherit ;
-  position: relative;
-  display: inline-block;
   border-radius: 50%;
-  transform-origin: 50%;
 }
 
 [dir=ltr] .loadingelement {

package/lib/Card/Card.module.css

@@ -1,9 +1,9 @@
 .notScroll {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .scroll {
-  /* background: var(--dot_white);
+  /* background-color: var(--dot_white);
   position: relative; */
 }
 

package/lib/CheckBox/CheckBox.module.css

@@ -23,10 +23,9 @@
   --checkbox_cursor: default;
 }
 .cbBox {
-  fill: none;
+  composes: d-fill-none d-stroke-inherit from global;
   stroke-width: var(--checkbox_stroke_width);
   stroke-linecap: round;
-  stroke: inherit;
 }
 .tickPath {
   composes: cbBox;
@@ -50,9 +49,8 @@
 }
 
 .checkbox {
-  position: relative;
+  composes: d-block d-relative from global;
   font-size: 0 ;
-  display: block;
 }
 .tick {
   position: absolute;

package/lib/DateTime/DateTime.module.css

@@ -16,7 +16,7 @@
 .header {
   min-height: var(--zd_size36) ;
   composes: boxPadding;
-  text-align: center;
+  composes: d-text-center from global;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
@@ -27,10 +27,10 @@
 }
 
 .grid {
+  composes: d-text-center from global;
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
   line-height: 1.3846;
-  text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
   border: 1px solid transparent;
@@ -38,21 +38,18 @@
 
 .thArrow,
 .datesStr {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_datetime_datestr_text);
 }
 
-.thArrow, .datesStr {
-  cursor: pointer;
-}
-
 .thArrow:hover,
 .datesStr:hover {
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow:hover, .datesStr:hover {
-  background: var(--zdt_datetime_datestr_hover_bg);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
 }
 
 .navigation {
@@ -89,8 +86,8 @@
   composes: dotted from '../common/common.module.css';
   font-size: var(--zd_font_size10) ;
   color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
   composes: semibold;
+  composes: d-uppercase from global;
   width: var(--zd_size31) ;
 }
 
@@ -143,8 +140,8 @@
 }
 
 .inActiveDate {
+  composes: d-cursor-no-drop from global;
   color: var(--zdt_datetime_invalid_text);
-  cursor: no-drop;
 }
 
 .inActiveDate:hover {
@@ -167,11 +164,10 @@
 }
 
 .dropDown {
+  composes: d-inline-block d-relative from global;
   width: var(--zd_size60) ;
-  display: inline-block;
   margin-inline: var(--zd_size4) ;
   margin-block:0 ;
-  position: relative;
 }
 
 .footer {
@@ -185,7 +181,7 @@
 }
 
 .space {
-  display: inline-block;
+  composes: d-inline-block from global;
   width: var(--zd_size15) ;
 }
 
@@ -195,7 +191,7 @@
 }
 
 .dateText {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .dateText:hover .downArrow {
@@ -205,18 +201,15 @@
 .text {
   composes: boxPadding;
   font-size: var(--zd_font_size11) ;
-  text-transform: uppercase;
   color: var(--zdt_datetime_text);
   margin-block-start: var(--zd_size14) ;
   composes: semibold;
-  display: block;
+  composes: d-block d-uppercase from global;
 }
 
 .yearContainer {
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
-  width: 100% ;
-  height: 100% ;
 }
 
 [dir=ltr] .yearContainer {
@@ -228,11 +221,11 @@
 }
 
 .subContainer {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .dropBox {
-  width: 100% ;
+  composes: d-w-full from global;
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);

package/lib/DateTime/DateWidget.module.css

@@ -1,20 +1,22 @@
 /* $Id */
 .container {
-  position: relative;
   composes: offSelection from '../common/common.module.css';
+  composes: d-relative from global;
+}
+.datePickIcon {
+  composes: d-h-full from global;
 }
-.datePickIcon{height:100%  }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }
 .enabled {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 .textBox {
-  position: relative;
+  composes: d-relative from global;
 }
 .inputLine {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: 0 ;
   transition: border var(--zd_transition2) linear 0s;
   border-bottom: 1px solid var(--zdt_datewidget_input_border);

package/lib/DateTime/YearView.module.css

@@ -3,6 +3,7 @@
 }
 
 .month {
+  composes: d-text-center d-cursor-pointer from global;
   width: 30.333%;
   margin-block:0 var(--zd_size1) ;
   margin-inline:0 ;
@@ -10,8 +11,6 @@
   line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
-  text-align: center;
-  cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
@@ -34,9 +33,9 @@
 }
 
 .year {
+  composes: d-cursor-pointer from global;
   padding-block: var(--zd_size7) ;
   padding-inline:0 ;
-  cursor: pointer;
 }
 
 .year:hover .yearText,
@@ -55,7 +54,7 @@
 }
 
 .isActive {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 
 .isActive .yearText {
@@ -77,21 +76,19 @@
 }
 
 .container {
-  height: 100% ;
-  overflow-y: auto;
-  overflow-x: hidden;
   composes: boxPadding;
+  composes: d-overflow-x-hidden d-overflow-y-auto d-h-full from global;
   background-color: var(--zdt_yearview_default_bg);
 }
 
 .yearContainer {
+  composes: d-overflow-hidden from global;
   height: var(--zd_size135) ;
-  overflow: hidden;
   transition: height var(--zd_transition1);
   padding-block-end: var(--zd_size5) ;
 }
 
 .toggleYear {
+  composes: d-p-0 from global;
   height: 0 ;
-  padding: 0 ;
 }

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -4,15 +4,15 @@
 }
 
 .container {
-    position: absolute;
+    composes: d-absolute from global;
 }
 
 .fixedContainer {
-    position: fixed;
+    composes: d-fixed from global;
 }
 
 .subContainer {
-    position: relative;
+    composes: d-relative from global;
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
@@ -74,7 +74,7 @@
 }
 
 .default {
-    width: 100% ;
+    composes: d-w-full from global;
 }
 
 /* shadow */
@@ -411,9 +411,8 @@
 }
 
 .responsive {
-    position: absolute;
+    composes: d-absolute d-w-full from global;
     bottom: 0 ;
-    width: 100% ;
     max-height: 90% ;
 }
 
@@ -426,6 +425,7 @@
 }
 
 .closeBar {
+    composes: d-cursor-pointer from global;
     /*  Variable:Ignore  */
     height: 6px;
     /*css:theme-validation:ignore*/
@@ -434,7 +434,6 @@
     margin-inline:auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
-    cursor: pointer;
 }
 
 .boxPadding {

package/lib/DropBox/css/DropBox.module.css

@@ -15,7 +15,7 @@
 
 .activateInDelay {
   composes: modeForward from '../../common/animation.module.css';
-  pointer-events: none;
+  composes: d-pointer-events-none from global;
 }
 
 [dir=ltr] .activateInDelay {
@@ -31,10 +31,10 @@
 }
 
 .freezeLayer {
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   composes: activateInDelay;
+  composes: d-absolute from global;
 }
 
 [dir=ltr] .freezeLayer {
@@ -49,7 +49,7 @@
 
 .freeze {
   composes: varClass;
-  background: var(--dropbox_mob_bg_color);
+  background-color: var(--dropbox_mob_bg_color);
 }
 
 @keyframes activateInDelay {

package/lib/DropDown/DropDownHeading.module.css

@@ -14,7 +14,7 @@
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);

package/lib/DropDown/DropDownItem.module.css

@@ -17,13 +17,11 @@
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
-  position: relative;
+  composes: d-relative d-border-solid d-cursor-pointer from global;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
   padding: var(--dropdownitem-padding);
-  border-style: solid;
   border-color: var(--dropdownitem-border-color);
-  cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
 [dir=ltr] .list {
@@ -50,8 +48,8 @@
 }
 
 .children {
+  composes: d-inline-block from global;
   margin-inline-end: var(--zd_size10) ;
-  display: inline-block;
   font-size: 0 ;
 }
 
@@ -61,11 +59,9 @@
 
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
-  position: absolute;
+  composes: d-absolute d-invisible d-opacity-0 from global;
   top: 0 ;
   bottom: 0 ;
-  opacity: 0;
-  visibility: hidden;
   width: var(--dropdownitem-user-width);
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);

package/lib/Label/Label.module.css

@@ -9,7 +9,7 @@
 /* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
-  vertical-align: middle;
+  composes: d-align-middle from global;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
@@ -40,10 +40,10 @@
   --label_cursor: default;
 }
 .title {
-  display: block;
+  composes: d-block from global;
 }
 .subtitle {
-  display: inline-block;
+  composes: d-inline-block from global;
 }
 .font_default {
   --label_font_weight: var(--zd-fw-normal);