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

package/es/Tag/Tag.module.css

@@ -35,10 +35,13 @@
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
   position: relative;
   vertical-align: middle;
+  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
+  /* css:theme-validation:ignore */
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
+  /* css:theme-validation:ignore */
   max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
@@ -123,11 +126,13 @@
   display: block;
 }
 .close {
+  /* css:theme-validation:ignore */
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0 ;
   bottom: 0 ;
+  /* css:theme-validation:ignore */
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
@@ -225,6 +230,7 @@
 }
 
 .icon {
+  /* css:theme-validation:ignore */
   margin: var(--tag_icon_margin);
   background-color: var(--tag_icon_bg_color);
 }

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);
@@ -25,29 +25,37 @@
   -moz-appearance: none;
   appearance: none;
   letter-spacing: var(--textbox_letter_spacing);
+  /* css:theme-validation:ignore */
   border: var(--textbox_border_width);
   cursor: var(--textbox_cursor);
 }
 .basic::placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .basic::-webkit-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .basic::-moz-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .basic::-ms-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container {
   composes: basic;
+  /* css:theme-validation:ignore */
   transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
+  /* css:theme-validation:ignore */
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
+  /* css:theme-validation:ignore */
   line-height: var(--textbox_line_height);
   background-color: var(--textbox_bg_color);
   -webkit-transition: border var(--zd_transition2) linear 0s;
@@ -68,15 +76,19 @@
   --textbox_bg_color: none;
 }
 .container::placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container::-webkit-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container::-moz-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .container::-ms-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textbox_placeholder_text_color);
 }
 .pointer {
@@ -87,12 +99,20 @@
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
+.effect:hover,
+.effect:focus {
+  /* css:theme-validation:ignore */
+}
 .effect:hover, .effect:focus {
   border-color: var(--textbox_border_color);
 }
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
+.borderColor_transparent,
+.borderColor_default {
+  /* css:theme-validation:ignore */
+}
 .borderColor_transparent, .borderColor_default {
   border-color: var(--textbox_border_color);
 }
@@ -115,21 +135,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/TextBoxIcon/TextBoxIcon.module.css

@@ -24,6 +24,7 @@
   cursor: var(--textboxicon_icon_cursor);
 }
 .iconContainer {
+  /* css:theme-validation:ignore */
   color: var(--textboxicon_icon_color);
 }
 .effect:hover .iconContainer,
@@ -50,6 +51,10 @@
   right: 0 ;
   left: 0 ;
 }
+.line,
+.borderColor_default {
+  /* css:theme-validation:ignore */
+}
 .line, .borderColor_default {
   background-color: var(--textboxicon_line_color);
 }

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);
 
@@ -19,6 +19,7 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
+  /* css:theme-validation:ignore */
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
 }
@@ -26,15 +27,19 @@
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-webkit-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-moz-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic::-ms-placeholder {
+  /* css:theme-validation:ignore */
   color: var(--textarea_placeholder_text_color);
 }
 .basic:disabled {
@@ -67,6 +72,7 @@
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
+  /* css:theme-validation:ignore */
   height: var(--textarea_height);
   -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
@@ -98,13 +104,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);
@@ -49,7 +49,9 @@
   height: 11px;
   border-top: solid 6px var(--zdt_tooltip_default_bg);
   border-left: solid 6px var(--zdt_tooltip_default_bg);
+  /* css:theme-validation:ignore */
   border-right: solid 6px transparent;
+  /* css:theme-validation:ignore */
   border-bottom: solid 6px transparent;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   z-index: -1;
@@ -69,7 +71,9 @@
   height: 11px;
   border-top: solid 6px var(--zdt_tooltip_default_bg);
   border-left: solid 6px var(--zdt_tooltip_default_bg);
+  /* css:theme-validation:ignore */
   border-right: solid 6px transparent;
+  /* css:theme-validation:ignore */
   border-bottom: solid 6px transparent;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   z-index: -1;

package/es/common/customscroll.module.css

@@ -23,9 +23,17 @@
   -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
   -ms-scrollbar-face-color: var(--zd-scroll-thump);
 }
+.scroll::-webkit-scrollbar,
+.scroll ::-webkit-scrollbar {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
   background: var(--zd-scroll-corner-bg);
 }
+.scroll::-webkit-scrollbar:hover,
+.scroll ::-webkit-scrollbar:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
   background: var(--zd-scroll-bg);
 }
@@ -43,6 +51,11 @@
   width: 0 ;
   height: 0 ;
 }
+.scroll::-webkit-scrollbar-track:vertical,
+.scroll ::-webkit-scrollbar-track:vertical {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
@@ -51,13 +64,26 @@
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
 }
+.scroll::-webkit-scrollbar-track:vertical:hover,
+.scroll ::-webkit-scrollbar-track:vertical:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
   border-color: var(--zd-scroll-border);
 }
+.scroll::-webkit-scrollbar-track:horizontal,
+.scroll ::-webkit-scrollbar-track:horizontal {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 }
+.scroll::-webkit-scrollbar-track:horizontal:hover,
+.scroll ::-webkit-scrollbar-track:horizontal:hover {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
   border-color: var(--zd-scroll-border);
 }
@@ -66,6 +92,8 @@
 }
 .scroll::-webkit-scrollbar-thumb,
 .scroll ::-webkit-scrollbar-thumb {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   /* display: none; */
 }
 .scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
@@ -74,6 +102,11 @@
   background-clip: padding-box;
   border: 3px solid transparent;
 }
+.scroll::-webkit-scrollbar-thumb:hover,
+.scroll ::-webkit-scrollbar-thumb:hover {
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
   background: var(--zd-scroll-thump-hoverbg);
   background-clip: padding-box;
@@ -83,6 +116,10 @@
 .scroll *:hover > ::-webkit-scrollbar-thumb {
   display: block;
 } */
+.scroll::-webkit-scrollbar-corner,
+.scroll ::-webkit-scrollbar-corner {
+  /* css:theme-validation:ignore */
+}
 .scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
   background: var(--zd-scroll-corner-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/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/lib/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/lib/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/lib/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/lib/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/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,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/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;