@zohodesk/components 1.0.0-alpha-247 → 1.0.0-alpha-249

package/es/CheckBox/CheckBox.js

@@ -1,7 +1,8 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
 import CssProvider from '../Provider/CssProvider';
@@ -149,64 +150,8 @@ export default class CheckBox extends React.Component {
   }
 
 }
-CheckBox.defaultProps = {
-  checked: false,
-  disabled: false,
-  isReadOnly: false,
-  active: false,
-  labelPalette: 'default',
-  labelSize: 'medium',
-  palette: 'primary',
-  size: 'medium',
-  isFilled: true,
-  variant: 'default',
-  dataId: 'checkBox',
-  activeStyle: 'tick',
-  customClass: {},
-  a11y: {},
-  isClipped: true,
-  customProps: {}
-};
-CheckBox.propTypes = {
-  active: PropTypes.bool,
-  activeStyle: PropTypes.oneOf(['tick', 'minus']),
-  ariaLabel: PropTypes.string,
-  ariaLabelledby: PropTypes.string,
-  checked: PropTypes.bool,
-  dataId: PropTypes.string,
-  disabled: PropTypes.bool,
-  disabledTitle: PropTypes.string,
-  getRef: PropTypes.func,
-  id: PropTypes.string,
-  isFilled: PropTypes.bool,
-  isClipped: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
-  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'danger']),
-  size: PropTypes.oneOf(['small', 'medium']),
-  text: PropTypes.string,
-  title: PropTypes.string,
-  variant: PropTypes.oneOf(['default', 'primary']),
-  customClass: PropTypes.shape({
-    customCheckBox: PropTypes.string,
-    customLabel: PropTypes.string,
-    customCBoxSize: PropTypes.string,
-    customTickSize: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    ariaLabel: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaHidden: PropTypes.bool,
-    ariaChecked: PropTypes.bool
-  }),
-  customProps: PropTypes.shape({
-    CheckBoxProps: PropTypes.object,
-    LabelProps: PropTypes.object
-  })
-};
+CheckBox.defaultProps = defaultProps;
+CheckBox.propTypes = propTypes;
 
 if (false) {
   CheckBox.docs = {

package/es/CheckBox/CheckBox.module.css

@@ -13,7 +13,9 @@
   composes: varClass;
   stroke: var(--checkbox_stroke_color);
 }
-.container, .pointer, .readonly {
+.container,
+.pointer,
+.readonly {
   cursor: var(--checkbox_cursor);
 }
 .pointer {
@@ -54,48 +56,37 @@
   font-size: 0;
   display: block;
 }
+/*rtl:begin:ignore*/
 .tick {
   position: absolute;
   left: 0;
 }
+/*rtl:end:ignore*/
 .mediumtick {
   top: calc(var(--zd_size2) * -1);
   height: var(--zd_size20);
   width: var(--zd_size20);
 }
+/*rtl:begin:ignore*/
 .smalltick {
   top: calc(var(--zd_size3) * -1);
   height: var(--zd_size18);
   width: var(--zd_size18);
   left: calc(var(--zd_size1) * -1);
 }
+/*rtl:end:ignore*/
 
 .checkedtickPath {
   stroke-dashoffset: 40;
-}
-
-[dir=ltr] .checkedtickPath {
-  animation: tickAnimate var(--zd_transition3) ease forwards;
-}
-
-[dir=rtl] .checkedtickPath {
   animation: tickAnimate var(--zd_transition3) ease forwards;
 }
 .linePath {
   transform-origin: center;
-}
-[dir=ltr] .linePath {
-  animation: lineAnimate var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .linePath {
   animation: lineAnimate var(--zd_transition3) ease forwards;
 }
-[dir=ltr] .text {
+.text {
   margin-left: var(--zd_size6);
 }
-[dir=rtl] .text {
-  margin-right: var(--zd_size6);
-}
 
 .checkedprimary,
 .checkeddanger {
@@ -138,6 +129,8 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
+
+/*rtl:begin:ignore*/
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;
@@ -155,3 +148,4 @@
     transform: scaleX(1);
   }
 }
+/*rtl:end:ignore*/

package/es/CheckBox/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  isReadOnly: false,
+  active: false,
+  labelPalette: 'default',
+  labelSize: 'medium',
+  palette: 'primary',
+  size: 'medium',
+  isFilled: true,
+  variant: 'default',
+  dataId: 'checkBox',
+  activeStyle: 'tick',
+  customClass: {},
+  a11y: {},
+  isClipped: true,
+  customProps: {}
+};

package/es/CheckBox/props/propTypes.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  activeStyle: PropTypes.oneOf(['tick', 'minus']),
+  ariaLabel: PropTypes.string,
+  ariaLabelledby: PropTypes.string,
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isFilled: PropTypes.bool,
+  isClipped: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'danger']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.shape({
+    customCheckBox: PropTypes.string,
+    customLabel: PropTypes.string,
+    customCBoxSize: PropTypes.string,
+    customTickSize: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaHidden: PropTypes.bool,
+    ariaChecked: PropTypes.bool
+  }),
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/DateTime/CalendarView.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
+import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
 import style from './DateTime.module.css';
 import { getMonthEnd } from '../utils/datetime/common';
@@ -159,18 +160,8 @@ export default class CalendarView extends React.PureComponent {
   }
 
 }
-CalendarView.propTypes = {
-  dataId: PropTypes.string,
-  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  needBorder: PropTypes.bool,
-  onSelect: PropTypes.func,
-  year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-CalendarView.defaultProps = {
-  dataId: 'dateContainer',
-  needBorder: true
-};
+CalendarView.propTypes = CalendarView_propTypes;
+CalendarView.defaultProps = CalendarView_defaultProps;
 export class Span extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -204,16 +195,5 @@ export class Span extends React.PureComponent {
   }
 
 }
-Span.propTypes = {
-  dataId: PropTypes.string,
-  handleSelect: PropTypes.func,
-  i: PropTypes.number,
-  incremday: PropTypes.number,
-  isActive: PropTypes.bool,
-  tdclass: PropTypes.string,
-  userSeeMonth: PropTypes.number,
-  userSeeYear: PropTypes.number
-};
-Span.defaultProps = {
-  dataId: 'calendar-view'
-};
+Span.propTypes = Span_propTypes;
+Span.defaultProps = Span_defaultProps;

package/es/DateTime/DateTime.js

@@ -2,7 +2,8 @@
 
 /* eslint-disable react/forbid-component-props */
 import React from 'react';
-import PropTypes from 'prop-types';
+import { DateTime_propTypes } from './props/propTypes';
+import { DateTime_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
 import CalendarView from './CalendarView';
 import YearView from './YearView';
@@ -771,64 +772,5 @@ export default class DateTime extends React.PureComponent {
   }
 
 }
-DateTime.propTypes = {
-  boxSize: PropTypes.string,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dateFormat: PropTypes.string,
-  // eslint-disable-next-line react/no-unused-prop-types
-  defaultTime: PropTypes.string,
-  getMethods: PropTypes.func,
-  getRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    timeText: PropTypes.string.isRequired,
-    submitText: PropTypes.string.isRequired,
-    cancelText: PropTypes.string.isRequired,
-    hourEmptyText: PropTypes.string.isRequired,
-    minuteEmptyText: PropTypes.string.isRequired,
-    nextMonthTitleText: PropTypes.string.isRequired,
-    prevMonthTitleText: PropTypes.string.isRequired
-  }),
-  innerClass: PropTypes.string,
-  isAbsolute: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isAnimate: PropTypes.bool,
-  isDateTimeField: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isReady: PropTypes.bool,
-  max: PropTypes.string,
-  maxErrorText: PropTypes.string,
-  min: PropTypes.string,
-  minErrorText: PropTypes.string,
-  // eslint-disable-next-line react/no-unused-prop-types
-  needAction: PropTypes.bool,
-  needDefaultTime: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClear: PropTypes.func,
-  onClick: PropTypes.func,
-  onDateSelect: PropTypes.func,
-  onError: PropTypes.func,
-  onSelect: PropTypes.func,
-  position: PropTypes.string,
-  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  is24Hour: PropTypes.bool,
-  isDefaultPosition: PropTypes.bool
-};
-DateTime.defaultProps = {
-  isDateTimeField: true,
-  dataId: 'dateTime',
-  needDefaultTime: true,
-  isAbsolute: true,
-  isAnimate: true,
-  needAction: true,
-  boxSize: 'large',
-  className: '',
-  innerClass: '',
-  dateFormat: 'dd/MM/yyyy',
-  isPadding: false,
-  i18nKeys: {},
-  is24Hour: false,
-  isDefaultPosition: false
-};
+DateTime.propTypes = DateTime_propTypes;
+DateTime.defaultProps = DateTime_defaultProps;

package/es/DateTime/DateTime.module.css

@@ -1,27 +1,23 @@
 .semibold {
   font-family: var(--zd_semibold);
 }
-[dir=ltr] .boxPadding {
+.boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
 }
-[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
-}
 .container {
-  font-size: var(--zd_font_size16);
-  composes: offSelection from '../common/common.module.css';
   border-radius: 3px;
   background-color: var(--zdt_datetime_default_bg);
+  font-size: var(--zd_font_size16);
+  composes: offSelection from '../common/common.module.css';
 }
 .header {
   min-height: var(--zd_size36);
-  composes: boxPadding;
   text-align: center;
   background-color: var(--zdt_datetime_header_bg);
   border-radius: 0 0 2px 2px;
   border-bottom: 1px solid var(--zdt_datetime_header_border);
+  composes: boxPadding;
 }
 
 .datesStr {
@@ -39,25 +35,17 @@
 .datesStr {
   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);
 }
 
-[dir=ltr] .navigation {
+.navigation {
   margin-left: var(--zd_size2);
 }
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
-}
 .thMonYear {
   font-size: var(--zd_font_size13);
   line-height: var(--zd_size24);
@@ -73,9 +61,9 @@
 }
 .days {
   min-height: var(--zd_size36);
+  padding-top: var(--zd_size7);
   composes: boxPadding;
   composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
 }
 .daysStr {
   font-size: var(--zd_font_size10);
@@ -85,8 +73,8 @@
 }
 .dateRow {
   height: var(--zd_size28);
-  composes: alignBetween from '../common/common.module.css';
   margin: var(--zd_size1) 0 var(--zd_size5);
+  composes: alignBetween from '../common/common.module.css';
 }
 .dateRow:last-child {
   margin-bottom: 0;
@@ -105,11 +93,8 @@
 
 .today,
 .today:hover {
-  color: var(--zdt_datetime_today_text);
-}
-
-.today, .today:hover {
   background-color: var(--zdt_datetime_today_bg);
+  color: var(--zdt_datetime_today_text);
   border-radius: 50%;
 }
 
@@ -123,8 +108,8 @@
 .dropDown {
   width: var(--zd_size60);
   display: inline-block;
-  position: relative;
   margin: 0 var(--zd_size4);
+  position: relative;
 }
 .footer {
   margin-top: var(--zd_size10);
@@ -140,15 +125,8 @@
 }
 
 .downArrow {
-  color: var(--zdt_datetime_daystr_text);
-}
-
-[dir=ltr] .downArrow {
   margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
+  color: var(--zdt_datetime_daystr_text);
 }
 .dateText {
   cursor: pointer;
@@ -161,22 +139,17 @@
   font-size: var(--zd_font_size11);
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
+  margin-top: var(--zd_size14);
   composes: semibold;
   display: block;
-  margin-top: var(--zd_size14);
 }
 .yearContainer {
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
-[dir=ltr] .yearContainer {
-  left: 0;
-}
-[dir=rtl] .yearContainer {
-  right: 0;
-}
 .subContainer {
   position: relative;
 }

package/es/DateTime/DateWidget.js

@@ -1,6 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
+import { DateWidget_propTypes } from './props/propTypes';
+import { DateWidget_defaultProps } from './props/defaultProps';
 import datetime from '@zohodesk/datetimejs';
 /**** Components ****/
 
@@ -1074,88 +1075,8 @@ class DateWidgetComponent extends React.Component {
 
 }
 
-DateWidgetComponent.defaultProps = {
-  borderColor: 'default',
-  dataId: 'dateWidget',
-  dateFormat: 'MM/dd/yyyy',
-  isDateTime: false,
-  isDisabled: false,
-  isPopupOpenOnEnter: false,
-  isReadOnly: false,
-  needBorder: true,
-  needDefaultTime: true,
-  placeholder: '-None-',
-  textBoxSize: 'medium',
-  textBoxVariant: 'default',
-  timeZone: null,
-  isPopupOpenOnClick: true,
-  isPopupCloseOnClick: false,
-  cantEditOnPopupOpen: true,
-  i18nKeys: {},
-  needErrorOnBlur: false,
-  isEditable: false,
-  iconOnHover: false,
-  is24Hour: false
-};
-DateWidgetComponent.propTypes = {
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  cantEditOnPopupOpen: PropTypes.bool,
-  children: PropTypes.object,
-  className: PropTypes.string,
-  closePopupOnly: PropTypes.func,
-  dataId: PropTypes.string,
-  dateFormat: PropTypes.oneOf(['yyyy/MM/dd', 'MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy-MM-dd', 'MM-dd-yyyy', 'dd-MM-yyyy', 'yyyy.MM.dd', 'MM.dd.yyyy', 'dd.MM.yyyy', 'dd/MMMM/YY', 'dd/MMM/YY']),
-  defaultPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
-  defaultTime: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getMethods: PropTypes.func,
-  getRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  i18nKeys: PropTypes.object,
-  id: PropTypes.string,
-  isDateTime: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isPopupCloseOnClick: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupOpenOnClick: PropTypes.bool,
-  isPopupOpenOnEnter: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  max: PropTypes.string,
-  maxErrorText: PropTypes.string,
-  min: PropTypes.string,
-  minErrorText: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needDefaultTime: PropTypes.bool,
-  needErrorOnBlur: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  onFailValidation: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onPassValidation: PropTypes.func,
-  onSelect: PropTypes.func,
-  placeholder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  togglePopup: PropTypes.func,
-  validation: PropTypes.shape({
-    validate: PropTypes.bool,
-    validateOn: PropTypes.string,
-    rulesOrder: PropTypes.arrayOf(PropTypes.string),
-    rules: PropTypes.object,
-    messages: PropTypes.object
-  }),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  htmlId: PropTypes.string,
-  iconOnHover: PropTypes.bool,
-  is24Hour: PropTypes.bool,
-  isHideCurrentYear: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func
-};
+DateWidgetComponent.defaultProps = DateWidget_defaultProps;
+DateWidgetComponent.propTypes = DateWidget_propTypes;
 const DateWidget = Popup(DateWidgetComponent);
 DateWidget.defaultProps = DateWidgetComponent.defaultProps; // eslint-disable-next-line no-undef
 

package/es/DateTime/DateWidget.module.css

@@ -3,7 +3,9 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.readOnly, .readOnly > input, .disabled {
+.readOnly,
+.readOnly > input,
+.disabled {
   cursor: not-allowed;
 }
 .enabled {
@@ -15,16 +17,10 @@
 .inputLine {
   position: absolute;
   bottom: 0;
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
   left: 0;
   right: 0;
-}
-[dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+  transition: border var(--zd_transition2) linear 0s;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/YearView.js

@@ -1,6 +1,7 @@
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
+import { YearView_propTypes } from './props/propTypes';
+import { YearView_defaultProps } from './props/defaultProps';
 /**** Components ****/
 
 import { Virtualizer } from '@zohodesk/virtualizer';
@@ -252,14 +253,5 @@ export default class YearView extends React.PureComponent {
   }
 
 }
-YearView.propTypes = {
-  dataId: PropTypes.string,
-  needBorder: PropTypes.bool,
-  onSelectMonth: PropTypes.func,
-  onSelectYear: PropTypes.func,
-  viewedYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-YearView.defaultProps = {
-  dataId: 'dateContainer',
-  needBorder: true
-};
+YearView.propTypes = YearView_propTypes;
+YearView.defaultProps = YearView_defaultProps;

package/es/DateTime/YearView.module.css

@@ -1,31 +1,26 @@
-[dir=ltr] .boxPadding {
+.boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
-}[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
 }
 .month {
   width: 30.333%;
-  font-size: var(--zd_font_size12);
-  line-height: var(--zd_size26);
-  height: var(--zd_size26);
-  color: var(--zdt_yearview_month_text);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size26);
+  height: var(--zd_size26);
+  color: var(--zdt_yearview_month_text);
 }
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
 .currentMonth,
 .currentMonth:hover {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-.currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
+  color: var(--zdt_yearview_currentmonth_text);
 }
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
@@ -54,13 +49,8 @@
   color: var(--zdt_yearview_year_hover_text);
 }
 .arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-[dir=ltr] .arrowActive {
   transform: rotate(180deg);
-}
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
+  color: var(--zdt_yearview_year_hover_text);
 }
 .container {
   height: 100%;