@zohodesk/components 1.0.0-temp-177 → 1.0.0-temp-179

package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css

@@ -1,3 +1,35 @@
 [data-mode='pureDark'][data-theme='yellow'] {
-	/* CTA variables */[object Object]primary_text: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]primary_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]primary_box_shadow: rgba(232, 185, 35, 0.2);[object Object]primary_hover_box_shadow: rgba(181, 145, 0, 0.25);[object Object]primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));[object Object]secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]beta_border: hsla(37, 66.94%, calc(52.55% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));[object Object]grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));[object Object]grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	/* CTA variables */
+	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
+	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -1,21 +1,45 @@
 [data-mode='pureDark'][data-theme='yellow'] {
-	/* stencil */[object Object]stencil_dark_bg: rgb(33,33,33);[object Object]stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
-	
-	/* dropbox */[object Object]dropbox_dark_bg: rgb(33,33,33);
-	
-	/* listitem */[object Object]listitem_dark_bg: rgb(33,33,33);[object Object]listitem_dark_text: rgb(226,228,230);[object Object]listitem_dark_effect_bg: rgb(43,43,43);[object Object]listitem_dark_active_bg: rgb(59,77,109);[object Object]listitem_dark_tickicon: rgb(215,152,53);
-	
-	/* tag */[object Object]tag_dark_text: rgb(208,208,212);[object Object]tag_dark_bg: rgb(38,38,38);[object Object]tag_dark_hover_text: rgb(208,208,212);[object Object]tag_dark_hover_bg: rgb(80,51,72);[object Object]tag_dark_close_bg: rgb(134,70,84);[object Object]tag_dark_close_text: rgb(222,53,53);
-	
-	/* multiselect */[object Object]multiselect_dark_border: rgb(88,88,88);[object Object]multiselect_darkmsg_bg: rgb(33,33,33);[object Object]multiselect_darkmsg_text: rgb(208,208,212);[object Object]multiselect_darkdelete_hover_text: rgb(226,228,230);
-	
-	/* avatar */[object Object]avatar_white_border: rgb(153,153,153);[object Object]avatar_white_text: rgb(255,255,255);
-	
-	/* label */[object Object]label_dark_text: rgb(208,208,212);
-	
-	/* textbox */[object Object]textbox_light_text: rgb(255,255,255);
-	
-	/* dropdown */[object Object]dropdown_darkheading_text: rgb(153,153,153);
-	
-	/* focusscope */[object Object]a11y_focusScope_focus_border: rgb(215,152,53);
+	/* stencil */
+	--zdt_stencil_dark_bg: rgb(33,33,33);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: rgb(33,33,33);
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: rgb(33,33,33);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(215,152,53);
+	
+	/* tag */
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(38,38,38);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: rgb(88,88,88);
+	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
+	
+	/* avatar */
+	--zdt_avatar_white_border: rgb(153,153,153);
+	--zdt_avatar_white_text: rgb(255,255,255);
+	
+	/* label */
+	--zdt_label_dark_text: rgb(208,208,212);
+	
+	/* textbox */
+	--zdt_textbox_light_text: rgb(255,255,255);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: rgb(153,153,153);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
 }

package/es/Avatar/Avatar.module.css

@@ -18,19 +18,31 @@
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
   vertical-align: middle;
   font-size: var(--avatar_font_size);
+  /* css:theme-validation:ignore */
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
 
 .border {
+  /* css:theme-validation:ignore */
   border-color: var(--avatar_border_color);
 }
 
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
 
+.avatar,
+.primary {
+  /* css:theme-validation:ignore */
+}
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }

package/es/AvatarTeam/AvatarTeam.module.css

@@ -25,6 +25,8 @@
   composes: varClass;
   composes: posab from '../common/common.module.css';
   top: var(--avatarteam_top_top);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
   outline-width: var(--avatarteam_outline_width);

package/es/Button/css/Button.module.css

@@ -48,10 +48,13 @@
   composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
+  /* css:theme-validation:ignore */
   color: var(--button_text_color);
   font-family: var(--button_font_family);
   text-transform: var(--button_text_transform);
+  /* css:theme-validation:ignore */
   min-width: var(--button_min_width);
+  /* css:theme-validation:ignore */
   height: var(--button_height);
   background-color: var(--button_bg_color);
   border-radius: var(--button_border_radius);
@@ -295,6 +298,7 @@
 .loadingelement:after {
   content: '';
   position: absolute;
+  /* css:theme-validation:ignore */
 }
 
 .loadingelement:before, .loadingelement:after {
@@ -468,6 +472,7 @@
   transform-origin: center;
   border-width: 2px 2px 0 0;
   border-style: solid;
+  /* css:theme-validation:ignore */
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }
@@ -523,4 +528,7 @@
   }
 }
 
-.loader{color:var(--dot_mirror)}
+.loader{
+  /* css:theme-validation:ignore */
+  color:var(--dot_mirror)
+}

package/es/Buttongroup/Buttongroup.module.css

@@ -11,6 +11,8 @@
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--buttongroup_bg_color);
   box-shadow: var(--buttongroup_box_shadow);
   padding: var(--buttongroup_padding);

package/es/CheckBox/CheckBox.module.css

@@ -34,6 +34,7 @@
 }
 .boxContainer {
   composes: offSelection from '../common/common.module.css';
+  /* css:theme-validation:ignore */
   border-radius: 2px;
   background-color: var(--checkbox_bg_color);
 }
@@ -120,6 +121,7 @@
 
 .checkedprimaryLabel,
 .checkeddangerLabel {
+  /* css:theme-validation:ignore */
   color: var(--checkbox_checked_active_color);
 }
 .activeprimaryLabel:hover

package/es/DateTime/DateTime.js

@@ -17,6 +17,7 @@ import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesSho
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { Box } from '../Layout';
 import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from './dateFormatUtils';
+import { getDateText } from './dateFormatUtils/dateFormat';
 
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
@@ -46,7 +47,6 @@ export default class DateTime extends React.PureComponent {
     this.handleSelectMonthViaYearView = this.handleSelectMonthViaYearView.bind(this);
     this.handleGetStateValues = this.handleGetStateValues.bind(this);
     this.handleYearViewToggle = this.handleYearViewToggle.bind(this);
-    this.getInitialDate = this.getInitialDate.bind(this);
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
@@ -103,33 +103,6 @@ export default class DateTime extends React.PureComponent {
     this.handleExposeMethods(false);
   }
 
-  getInitialDate(value) {
-    let timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-    let isDateTime = arguments.length > 2 ? arguments[2] : undefined;
-    let result = null;
-
-    if (isDateTime) {
-      if (timeZone && value) {
-        result = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
-      } else {
-        value = value ? value.replace('Z', '') : null;
-        result = value ? new Date(value) : new Date();
-      }
-    } else {
-      if (value) {
-        if (timeZone) {
-          result = datetime.toDate(value);
-        } else {
-          result = new Date(value);
-        }
-      } else {
-        result = new Date();
-      }
-    }
-
-    return result;
-  }
-
   getStateFromProps(props) {
     let date, month, year, hours, mins, amPm;
     let {
@@ -154,7 +127,7 @@ export default class DateTime extends React.PureComponent {
       defaultMin = parseInt(defaultMin);
     }
 
-    const dateObj = this.getInitialDate(value, timeZone, isDateTimeField);
+    const dateObj = getDateText(value, isDateTimeField, timeZone);
     date = dateObj.getDate();
     month = dateObj.getMonth();
     year = dateObj.getFullYear();

package/es/DateTime/DateTime.module.css

@@ -35,7 +35,8 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
+  /* css:theme-validation:ignore */
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
@@ -71,7 +72,7 @@
 
 .thMonYear {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_size24);
+  line-height: 1.8462;
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
   display: initial

package/es/DateTime/DateWidget.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { DateWidget_propTypes } from './props/propTypes';
 import { DateWidget_defaultProps } from './props/defaultProps';
-import datetime from '@zohodesk/datetimejs';
 /**** Components ****/
 
 import DateTime from './DateTime';
@@ -18,7 +17,7 @@ import style from './DateWidget.module.css';
 import validator from './validator';
 import { formatDate } from '../utils/datetime/common';
 import { getIsSupportedKey, arrayIsNotEqual } from './dateFormatUtils';
-import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate } from './dateFormatUtils/dateFormat';
+import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from './dateFormatUtils/dateFormat';
 import { getChangedDay } from './dateFormatUtils/dayChange';
 import { getChangedMonth } from './dateFormatUtils/monthChange';
 import { getChangedYear } from './dateFormatUtils/yearChange';
@@ -315,13 +314,10 @@ class DateWidgetComponent extends React.Component {
 
     if (selected) {
       let format = newDateFormat,
-          convertedValue;
+          convertedValue = getDateText(value, isDateTime, timeZone);
 
       if (isDateTime) {
-        convertedValue = datetime.toDate(datetime.tz.utcToTz(value, timeZone));
         format = `${newDateFormat} ${is24Hour ? 'HH:mm' : 'hh:mm A'}`;
-      } else {
-        convertedValue = datetime.toDate(value);
       }
 
       displayText = formatDate(convertedValue, format);

package/es/DateTime/YearView.module.css

@@ -9,7 +9,7 @@
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size26);
+  line-height: 2.1667;
   height: var(--zd_size26) ;
   color: var(--zdt_yearview_month_text);
   text-align: center;

package/es/DateTime/dateFormatUtils/dateFormat.js

@@ -213,6 +213,13 @@ export function getDateTimeString() {
 
   return `${dateString}${timeString}`;
 }
+export function getDateText(value, isDateTime, timeZone) {
+  if (value && !timeZone) {
+    value = value.replace('Z', '');
+  }
+
+  return value ? isDateTime ? timeZone ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? datetime.toDate(value) : new Date(value) : new Date();
+}
 export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
   let {
     is24Hour
@@ -227,7 +234,7 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
   } = localValues;
 
   if (value) {
-    const dateObj = isDateTime ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : value ? datetime.toDate(value) : new Date();
+    const dateObj = getDateText(value, isDateTime, timeZone);
     const selectedDay = dateObj.getDate();
     const selectedMonth = dateObj.getMonth();
     const selectedYear = dateObj.getFullYear();

package/es/DateTime/dateFormatUtils/index.js

@@ -1,13 +1,11 @@
 /* eslint-disable no-param-reassign */
 
-/** * Libraries ** */
-import datetime from '@zohodesk/datetimejs';
 /** * Methods ** */
-
 import { getMonthEnd } from '../../utils/datetime/common';
 /** * Constants ** */
 
 import { flags, INVALID_DATE } from '../constants';
+import { getDateText } from './dateFormat';
 export function convertYearToTwoDigit(year) {
   return parseInt(year.toString().slice(-2));
 }
@@ -235,7 +233,7 @@ export function getIsCurrentYear(_ref) {
   let isCurrentYear = false;
 
   if (value && value !== INVALID_DATE) {
-    const dateObj = isDateTime ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : datetime.toDate(value);
+    const dateObj = getDateText(value, isDateTime, timeZone);
     const currentDateObj = new Date();
     const currentYear = currentDateObj.getFullYear();
     const selectedYear = dateObj.getFullYear();

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+  /* css:theme-validation:ignore */
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -210,6 +215,7 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -419,6 +425,7 @@
 .closeBar {
   /*  Variable:Ignore  */
     height: 6px;
+  /* css:theme-validation:ignore */
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/es/DropBox/css/DropBox.module.css

@@ -49,6 +49,7 @@
 
 .freeze {
   composes: varClass;
+  /* css:theme-validation:ignore */
   background: var(--dropbox_mob_bg_color);
 }
 

package/es/DropDown/DropDownHeading.module.css

@@ -18,7 +18,9 @@
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
+  /* css:theme-validation:ignore */
   color: var(--dropdownheading_text_color);
+  /* css:theme-validation:ignore */
   padding: var(--dropdownheading_padding);
   background-color: var(--dropdownheading_bg_color);
 }
@@ -33,6 +35,10 @@
 .light {
   composes: default;
 }
+.light::after,
+.dark::after {
+  /* css:theme-validation:ignore */
+}
 .light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }

package/es/DropDown/DropDownItem.module.css

@@ -20,6 +20,8 @@
   position: relative;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -74,6 +76,7 @@
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
+  /* css:theme-validation:ignore */
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);
   border-color: var(--dropdownitem-user-border-color);

package/es/Label/Label.module.css

@@ -4,13 +4,14 @@
   --label_text_color: var(--zdt_label_default_text);
   --label_font_family: var(--zd_regular);
   --label_cursor: default;
-  --label_line_height: 18px;
+  --label_line_height: 1.2857142857142858;
 }
 .label {
   composes: varClass;
   vertical-align: middle;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
+  /* css:theme-validation:ignore */
   color: var(--label_text_color);
   font-family: var(--label_font_family);
   cursor: var(--label_cursor);

package/es/ListItem/ListItem.module.css

@@ -24,8 +24,10 @@
   composes: varClass;
   position: relative;
   list-style: none;
+  /* css:theme-validation:ignore */
   color: var(--listitem_text_color);
   font-size: var(--zd_font_size13) ;
+  /* css:theme-validation:ignore */
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -35,6 +37,11 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
+.list,
+.default,
+.secondary {
+  /* css:theme-validation:ignore */
+}
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
@@ -75,7 +82,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .multiLineValue{
   word-break: break-word;
@@ -99,6 +106,13 @@
   margin: var(--listitem_avatar_margin);
 }
 
+.defaultHover,
+.primaryHover,
+.secondaryHover,
+.darkHover {
+  /* css:theme-validation:ignore */
+}
+
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -140,6 +154,12 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
+.activedefault,
+.activeprimary,
+.activesecondary,
+.activedark {
+  /* css:theme-validation:ignore */
+}
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
@@ -165,6 +185,7 @@
 .defaultTick,
 .darkTick {
   position: absolute;
+  /* css:theme-validation:ignore */
   color: var(--listitem_tickicon_color);
 }
 

package/es/PopOver/PopOver.module.css

@@ -1,5 +1,6 @@
 .popup {
   position: relative;
+  /* css:theme-validation:ignore */
   background-color: var(--dot_white);
 }
 .target {

package/es/Radio/Radio.module.css

@@ -25,6 +25,7 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
+  /* css:theme-validation:ignore */
   stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;

package/es/Ribbon/Ribbon.module.css

@@ -35,9 +35,12 @@
 .basic {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   line-height: var(--ribbon_line_height);
   padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
@@ -212,7 +215,7 @@
   composes: dotted from '../common/common.module.css';
   display: block;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_line_height: 20px;
+  --ribbon_line_height: 1.53846154;
   --ribbon_text_transform: uppercase;
 }
 
@@ -260,7 +263,7 @@
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  --ribbon_line_height: 20px;
+  --ribbon_line_height: 1.53846154;
   text-align: center;
 }
 
@@ -335,6 +338,7 @@
   position: absolute;
   content: '';
   top: var(--ribbon_tag_before_top);
+  /* css:theme-validation:ignore */
   width: var(--ribbon_tag_before_width);
   height: var(--ribbon_tag_before_height);
   background-color: inherit;
@@ -370,7 +374,7 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size11);
+  line-height: 0.8462;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;

package/es/Switch/Switch.module.css

@@ -26,6 +26,7 @@
   display: inline-block;
   position: relative;
   transition: box-shadow var(--zd_transition3) ease-in-out;
+  /* css:theme-validation:ignore */
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
   cursor: pointer;
@@ -44,6 +45,7 @@
   right: 50% ;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
+  /* css:theme-validation:ignore */
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
 }

package/es/Tab/Tab.module.css

@@ -32,7 +32,7 @@
 }
 .alpha {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
@@ -55,7 +55,7 @@
 }
 .beta {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size60);
+  line-height: 4.2857;
   text-transform: capitalize;
   padding: 0 var(--zd_size4) ;
 }
@@ -78,7 +78,7 @@
 }
 .delta {
   font-size: var(--zd_font_size11) ;
-  line-height: var(--zd_size33);
+  line-height: 3;
   padding: 0 var(--zd_size4) ;
 }
 [dir=ltr] .delta {