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

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/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,7 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
@@ -71,7 +71,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/Label/Label.module.css

@@ -4,7 +4,7 @@
   --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;

package/es/ListItem/ListItem.module.css

@@ -75,7 +75,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .value, .multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .multiLineValue{
   word-break: break-word;

package/es/Ribbon/Ribbon.module.css

@@ -8,7 +8,7 @@
   --ribbon_box_shadow: none;
   --ribbon_border_width: 0;
   --ribbon_border_color: var(--zdt_ribbon_default_border);
-  --ribbon_line_height: normal;
+  --ribbon_line_height: 1.2;
 
   /* flag ribbon default variable */
 
@@ -212,7 +212,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 +260,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;
 }
 
@@ -370,7 +370,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/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 {

package/es/TextBox/TextBox.module.css

@@ -14,7 +14,7 @@
   --textbox_letter_spacing: 0.1px;
   --textbox_padding: 0;
   --textbox_cursor: auto;
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 
   /* textbox placeholder default variable */
   --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
@@ -115,21 +115,21 @@
 }
 .xmedium {
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2;
 }
 .medium {
   --textbox_height: var(--zd_size35);
-  --textbox_line_height: 35px;
+  --textbox_line_height: 2.5;
 }
 .small {
   --textbox_font_size: var(--zd_font_size12);
   --textbox_height: var(--zd_size28);
-  --textbox_line_height: 28px;
+  --textbox_line_height: 2.33333333333;
 }
 .xsmall {
   --textbox_font_size: var(--zd_font_size13);
   --textbox_height: var(--zd_size25);
-  --textbox_line_height: 25px;
+  --textbox_line_height: 1.92307692308;
 }
 .default,
 .primary,

package/es/TextBox/props/defaultProps.js

@@ -1,7 +1,6 @@
 export const defaultProps = {
   isDisabled: false,
   isReadOnly: false,
-  maxLength: 250,
   needBorder: true,
   size: 'medium',
   type: 'text',

package/es/Textarea/Textarea.module.css

@@ -5,7 +5,7 @@
   --textarea_cursor: auto;
   --textarea_text_color: var(--zdt_textarea_default_text);
   --textarea_font_size: var(--zd_font_size14);
-  --textarea_line_height: 22px;
+  --textarea_line_height: 1.57142857;
   --textarea_padding: var(--zd_size2) 0;
   --textarea_height: var(--zd_size30);
 
@@ -98,13 +98,13 @@
   --textarea_font_size: var(--zd_font_size14);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size28);
-  --textarea_line_height: 19px;
+  --textarea_line_height: 1.35714285714;
 }
 .xmedium {
   --textarea_font_size: var(--zd_font_size13);
   --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
   --textarea_height: var(--zd_size25);
-  --textarea_line_height: 17px;
+  --textarea_line_height: 1.30769230769;
 }
 .small {
   --textarea_height: var(--zd_size30);

package/es/Tooltip/Tooltip.module.css

@@ -17,7 +17,7 @@
   font-family: var(--zd_semibold);
   word-break: break-word;
   max-width: var(--zd_size420) ;
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
   min-height: var(--zd_size24) ;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);

package/es/v1/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 '../../DateTime/dateFormatUtils';
+import { getDateText } from './../../DateTime/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, timeZone, isDateTimeField);
     date = dateObj.getDate();
     month = dateObj.getMonth();
     year = dateObj.getFullYear();

package/es/v1/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 '../../DateTime/DateWidget.module.css';
 import validator from '../../DateTime/validator';
 import { formatDate } from '../../utils/datetime/common';
 import { getIsSupportedKey, arrayIsNotEqual } from '../../DateTime/dateFormatUtils';
-import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate } from '../../DateTime/dateFormatUtils/dateFormat';
+import { getDateFormatDetails, getDateFormatSelection, getDateTimeString, getDateDetails, getIsValidDate, getSelectedDate, getDateText } from '../../DateTime/dateFormatUtils/dateFormat';
 import { getChangedDay } from '../../DateTime/dateFormatUtils/dayChange';
 import { getChangedMonth } from '../../DateTime/dateFormatUtils/monthChange';
 import { getChangedYear } from '../../DateTime/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/lib/DateTime/DateTime.js

@@ -39,6 +39,8 @@ var _Layout = require("../Layout");
 
 var _dateFormatUtils = require("./dateFormatUtils");
 
+var _dateFormat = require("./dateFormatUtils/dateFormat");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
@@ -111,7 +113,6 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
     _this.handleSelectMonthViaYearView = _this.handleSelectMonthViaYearView.bind(_assertThisInitialized(_this));
     _this.handleGetStateValues = _this.handleGetStateValues.bind(_assertThisInitialized(_this));
     _this.handleYearViewToggle = _this.handleYearViewToggle.bind(_assertThisInitialized(_this));
-    _this.getInitialDate = _this.getInitialDate.bind(_assertThisInitialized(_this));
     var _props$i18nKeys$ampmT = props.i18nKeys.ampmText,
         ampmText = _props$i18nKeys$ampmT === void 0 ? _constants.ampmTextDefault : _props$i18nKeys$ampmT;
 
@@ -171,34 +172,6 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentWillUnmount() {
       this.handleExposeMethods(false);
     }
-  }, {
-    key: "getInitialDate",
-    value: function getInitialDate(value) {
-      var timeZone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-      var isDateTime = arguments.length > 2 ? arguments[2] : undefined;
-      var result = null;
-
-      if (isDateTime) {
-        if (timeZone && value) {
-          result = _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone));
-        } else {
-          value = value ? value.replace('Z', '') : null;
-          result = value ? new Date(value) : new Date();
-        }
-      } else {
-        if (value) {
-          if (timeZone) {
-            result = _datetimejs["default"].toDate(value);
-          } else {
-            result = new Date(value);
-          }
-        } else {
-          result = new Date();
-        }
-      }
-
-      return result;
-    }
   }, {
     key: "getStateFromProps",
     value: function getStateFromProps(props) {
@@ -229,7 +202,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         defaultMin = parseInt(defaultMin);
       }
 
-      var dateObj = this.getInitialDate(value, timeZone, isDateTimeField);
+      var dateObj = (0, _dateFormat.getDateText)(value, isDateTimeField, timeZone);
       date = dateObj.getDate();
       month = dateObj.getMonth();
       year = dateObj.getFullYear();

package/lib/DateTime/DateTime.module.css

@@ -35,7 +35,7 @@
 .grid {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
-  line-height: var(--zd_size18);
+  line-height: 1.3846;
   text-align: center;
   padding: var(--zd_size4) 0 ;
   border-radius: 50%;
@@ -71,7 +71,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/lib/DateTime/DateWidget.js

@@ -13,8 +13,6 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
-var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
-
 var _DateTime = _interopRequireDefault(require("./DateTime"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
@@ -358,13 +356,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
       if (selected) {
         var format = newDateFormat,
-            convertedValue;
+            convertedValue = (0, _dateFormat.getDateText)(value, isDateTime, timeZone);
 
         if (isDateTime) {
-          convertedValue = _datetimejs["default"].toDate(_datetimejs["default"].tz.utcToTz(value, timeZone));
           format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
-        } else {
-          convertedValue = _datetimejs["default"].toDate(value);
         }
 
         displayText = (0, _common.formatDate)(convertedValue, format);

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