@zohodesk/components 1.0.0-temp-161 → 1.0.0-temp-162

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-270
+
+- **Tabs** - DropBox position RTL fix
+
 # 1.0.0-alpha-269
 
 - **DateTime** - 24Hour Suggestion Issue Fixed

package/es/Avatar/Avatar.js

@@ -4,6 +4,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getInitial } from '../utils/getInitial';
 import AvatarSize from '../Provider/AvatarSize';
+import Typography from '../Typography/Typography';
 import style from './Avatar.module.css';
 /*
 1. need to change name into firstName lastName
@@ -150,10 +151,13 @@ export default class Avatar extends React.Component {
       "data-id": dataId,
       onClick: onClick,
       "data-selector-id": dataSelectorId
-    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+    }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement(Typography, {
       className: `${style.initial}`,
-      "data-id": `${dataId}_AvatarInitial`,
-      "data-selector-id": `${dataSelectorId}_AvatarInitial`
+      dataId: `${dataId}_AvatarInitial`,
+      customProps: {
+        'data-selector-id': `${dataSelectorId}_AvatarInitial`
+      },
+      tagName: "span"
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
       className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,

package/es/DateTime/CalendarView.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Span_propTypes, CalendarView_propTypes } from './props/propTypes';
 import { CalendarView_defaultProps, Span_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
+import Typography from '../Typography/Typography';
 import style from './DateTime.module.css';
 import { getMonthEnd } from '../utils/datetime/common';
 import DaysRow from './DaysRow';
@@ -198,7 +199,9 @@ export class Span extends React.PureComponent {
       key: i,
       onClick: this.handleSelectChild,
       "aria-label": incremday
-    }, incremday);
+    }, /*#__PURE__*/React.createElement(Typography, {
+      size: "13"
+    }, incremday));
   }
 }
 Span.propTypes = Span_propTypes;

package/es/DateTime/DateTime.module.css

@@ -44,13 +44,15 @@
 
 .thArrow,
 .datesStr {
-  font-size: 13px;
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow, .datesStr {
   cursor: pointer;
 }
+.thArrow{
+   font-size: var(--zd_font_size13);
+}
 
 .thArrow:hover,
 .datesStr:hover {
@@ -94,7 +96,6 @@
 }
 
 .daysStr {
-  font-size: 10px;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
@@ -201,7 +202,6 @@
 
 .text {
   composes: boxPadding;
-  font-size: 11px;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
@@ -233,4 +233,4 @@
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
-}
+}

package/es/DateTime/DateTimePopupHeader.js

@@ -6,7 +6,7 @@ import React, { PureComponent } from 'react';
 /** ** Components *** */
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import Heading from '../Heading/Heading';
+import Typography from '../Typography/Typography';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -58,14 +58,11 @@ export default class DateTimePopupHeader extends PureComponent {
       className: style.dateText,
       dataId: "selectYear",
       onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement(Heading, {
+    }, /*#__PURE__*/React.createElement(Typography, {
       className: style.thMonYear,
-      title: showMonthTxt,
       tagName: "h2",
-      a11y: {
-        tabindex: '0'
-      }
-    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
+      size: "13"
+    }, showMonthTxt), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-dropdown",
       size: "12",
       iconClass: style.downArrow

package/es/DateTime/DaysRow.js

@@ -7,6 +7,7 @@ import style from './DateTime.module.css';
 
 /** ** Components *** */
 import { Container, Box } from '../Layout';
+import Typography from '../Typography/Typography';
 export default class DaysRow extends PureComponent {
   render() {
     const {
@@ -19,9 +20,11 @@ export default class DaysRow extends PureComponent {
       className: style.days
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
-      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
       "data-title": dayName,
       "aria-label": dayName
-    }, dayNamesShort[index])));
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
+      size: "10"
+    }, " ", dayNamesShort[index]))));
   }
 }

package/es/DateTime/Time.js

@@ -5,6 +5,7 @@ import React, { PureComponent } from 'react';
 /**** Components ****/
 import { Container, Box } from '../Layout';
 import Select from '../Select/Select';
+import Typography from '../Typography/Typography';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -27,8 +28,10 @@ export default class Time extends PureComponent {
       amPm,
       is24Hour
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: style.text
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      className: style.text,
+      tagName: "span",
+      size: "11"
     }, timeText), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical",

package/es/DateTime/YearView.js

@@ -7,7 +7,7 @@ import { YearView_defaultProps } from './props/defaultProps';
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';
-import Heading from '../Heading/Heading';
+import Typography from '../Typography/Typography';
 /**** CSS ****/
 import style from './YearView.module.css';
 
@@ -52,14 +52,12 @@ class Year extends React.PureComponent {
       align: "vertical"
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, /*#__PURE__*/React.createElement(Heading, {
+    }, /*#__PURE__*/React.createElement(Typography, {
       className: style.yearText,
-      title: year,
-      a11y: {
-        tabindex: '0'
-      },
-      tagName: "h4"
-    })), /*#__PURE__*/React.createElement(Icon, {
+      tagName: "h2",
+      size: "11",
+      dataTitle: year
+    }, year)), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowDownSingle",
       size: "7",
       isBold: true,
@@ -94,7 +92,9 @@ class Month extends React.PureComponent {
       onClick: this.handleClick,
       "data-title": hoverText,
       "aria-label": month
-    }, displayText);
+    }, /*#__PURE__*/React.createElement(Typo, {
+      size: "12"
+    }, displayText));
   }
 }
 export default class YearView extends React.PureComponent {

package/es/DateTime/YearView.module.css

@@ -8,7 +8,6 @@
 
 .month {
   width: 30.333%;
-  font-size: 12px;
   line-height: var(--zd_size26);
   height: 26px;
   color: var(--zdt_yearview_month_text);
@@ -48,7 +47,6 @@
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: 11px;
 }
 
 .arrow {
@@ -63,7 +61,6 @@
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
-  font-size: 11px;
 }
 
 .arrowActive {
@@ -96,4 +93,4 @@
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/es/Heading/Heading.js

@@ -7,21 +7,21 @@ export default class Heading extends React.Component {
     let {
       tagName,
       className,
-      onClick,
-      onDoubleClick,
       title,
       dataTitle,
       dataId,
-      a11y
+      a11y,
+      customProps,
+      size,
+      children
     } = this.props;
     return /*#__PURE__*/React.createElement(tagName, {
-      className: `${style.reset} ${className}`,
-      onClick,
-      onDoubleClick,
+      className: `${style.reset} ${style[`size${size}`]}  ${className}`,
       'data-title': dataTitle || title,
       'data-id': dataId,
+      ...customProps,
       ...a11y
-    }, title);
+    }, title, children);
   }
 }
 Heading.propTypes = propTypes;

package/es/Heading/Heading.module.css

@@ -2,4 +2,71 @@
   font-size: initial;
   font-weight: initial;
   margin: initial;
-}
+}
+
+.size8{
+  font-size: 8px;
+}
+.size9{
+  font-size: 9px;
+}
+.size10{
+  font-size: 10px;
+}
+.size11{
+  font-size: 11px;
+}
+.size12{
+  font-size: 12px;
+}
+.size13{
+  font-size: 13px;
+}
+.size14{
+  font-size: 14px;
+}
+.size15{
+  font-size: 15px;
+}
+.size16{
+  font-size: 16px;
+}
+.size17{
+  font-size: 17px;
+}
+.size18{
+  font-size: 18px;
+}
+.size19{
+  font-size: 19px;
+}
+.size20{
+  font-size: 20px;
+}
+.size21{
+  font-size: 21px;
+}
+.size22{
+  font-size: 22px;
+}
+.size23{
+  font-size: 23px;
+}
+.size24{
+  font-size: 24px;
+}
+.size25{
+  font-size: 25px;
+}
+.size26{
+  font-size: 26px;
+}
+.size30{
+  font-size: 30px;
+}
+.size50{
+  font-size: 50px;
+}
+.sizeinherit{
+  font-size: inherit;
+}

package/es/Heading/props/defaultProps.js

@@ -1,5 +1,7 @@
 export const defaultProps = {
   tagName: 'h1',
   a11y: {},
-  className: ''
+  className: '',
+  customProps: {},
+  size: 'inherit'
 };

package/es/Heading/props/propTypes.js

@@ -5,7 +5,8 @@ export const propTypes = {
   title: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  a11y: PropTypes.object
+  customProps: PropTypes.object,
+  children: PropTypes.node,
+  a11y: PropTypes.object,
+  size: PropTypes.oneOf(['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '30', '50', 'inherit'])
 };

package/es/Label/Label.js

@@ -4,6 +4,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import Typography from '../Typography/Typography';
 import style from './Label.module.css';
 import colors from './LabelColors.module.css';
 export default class Label extends React.Component {
@@ -24,15 +25,17 @@ export default class Label extends React.Component {
       id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
-      className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
+      className: `${style.label} ${style[type]} ${colors[palette]} ${style[`font_${variant}`]}
+           ${onClick ? style.pointer : style.cursor} ${customClass} `,
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
       "data-selector-id": dataSelectorId,
       onClick: onClick,
       id: id
-    }, text);
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: `${clipped ? style.dotted : ''} ${style[size]}`
+    }, text));
   }
 }
 Label.defaultProps = defaultProps;

package/es/ListItem/ListItem.js

@@ -6,6 +6,7 @@ import ListContainer from './ListContainer';
 import { ListItemDefaultProps } from './props/defaultProps';
 import { ListItem_Props } from './props/propTypes';
 /**** Components ****/
+import Typography from '../Typography/Typography';
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './ListItem.module.css';
@@ -104,9 +105,12 @@ export default class ListItem extends React.Component {
       customProps: ListItemProps
     }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
-      adjust: true,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
+      adjust: true
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: needMultiLineText ? style.multiLineValue : style.value,
+      size: "13",
+      dataTitle: value
+    }, value)) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.children

package/es/ListItem/ListItem.module.css

@@ -25,7 +25,6 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;

package/es/ListItem/ListItemWithAvatar.js

@@ -10,6 +10,7 @@ import { ListItemWithAvatar_Props } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
 import { Icon } from '@zohodesk/icons';
+import Typography from '../Typography/Typography';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItemWithAvatar extends React.PureComponent {
@@ -130,9 +131,12 @@ export default class ListItemWithAvatar extends React.PureComponent {
     })) : null, value ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      "data-title": isDisabled ? null : title,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: needMultiLineText ? style.multiLineValue : style.value,
+      size: "13",
+      dataTitle: value
+    }, value)) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithCheckBox.js

@@ -5,6 +5,7 @@ import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
 import { ListItemWithCheckBox_Props } from './props/propTypes';
 import CheckBox from '../CheckBox/CheckBox';
 import { Box } from '../Layout';
+import Typography from '../Typography/Typography';
 import style from './ListItem.module.css';
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -98,9 +99,12 @@ export default class ListItemWithCheckBox extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      "data-title": isDisabled ? null : title,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value));
+      "data-title": isDisabled ? null : title
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: needMultiLineText ? style.multiLineValue : style.value,
+      size: "13",
+      dataTitle: value
+    }, value)));
   }
 }
 ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;

package/es/ListItem/ListItemWithIcon.js

@@ -6,6 +6,7 @@ import { Icon } from '@zohodesk/icons';
 import ListContainer from './ListContainer';
 import { ListItemWithIconDefaultProps } from './props/defaultProps';
 import { ListItemWithIcon_Props } from './props/propTypes';
+import Typography from '../Typography/Typography';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItemWithIcon extends React.Component {
@@ -111,10 +112,13 @@ export default class ListItemWithIcon extends React.Component {
     }) : null, value && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
-    }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: needMultiLineText ? style.multiLineValue : style.value,
+      size: "13",
+      dataTitle: value
+    }, value)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithRadio.js

@@ -5,6 +5,7 @@ import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 import { ListItemWithRadioDefaultProps } from './props/defaultProps';
 import { ListItemWithRadio_Props } from './props/propTypes';
+import Typography from '../Typography/Typography';
 import style from './ListItem.module.css';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -100,9 +101,12 @@ export default class ListItemWithRadio extends React.Component {
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      "data-title": disableTitle ? null : title,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value));
+      "data-title": disableTitle ? null : title
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: needMultiLineText ? style.multiLineValue : style.value,
+      size: "13",
+      dataTitle: value
+    }, value)));
   }
 }
 ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;

package/es/Responsive/ResizeComponent.js

@@ -12,21 +12,8 @@ export default class ResizeComponent extends React.Component {
     this.noSpaceForChildren = false;
     this.childrenCurrentList = [];
     this.widthCheck = debounce(this.widthCheck.bind(this), 10);
-    const debounce = function (cb) {
-      let timer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-      let timeoutId = null;
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-          cb();
-        }, timer);
-      };
-    };
-    this.widthCheck = debounce(this.widthCheck.bind(this), 500); // this.widthCheck = this.widthCheck.bind(this);
-
-    this.onResize = debounce(this.onResize.bind(this), 500);
+    // this.widthCheck = this.widthCheck.bind(this);
+    this.onResize = this.onResize.bind(this);
     this.onResizeMutation = this.onResizeMutation.bind(this);
     this.tabsObserver = new ResizeObserver(this.onResize);
     this.tabObserver = new MutationObserver(this.onResizeMutation);

package/es/Tab/Tab.js

@@ -6,6 +6,7 @@ import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';
 import { Tab_propTypes } from './props/propTypes';
 import { Box, Container } from '../Layout';
+import Typography from '../Typography/Typography';
 import { cs } from '../utils/Common';
 import styles from './Tab.module.css';
 const tabTypes = {
@@ -93,9 +94,10 @@ export default function Tab(_ref) {
     className: styles.textContainer
   }, text && /*#__PURE__*/React.createElement(Box, {
     flexible: true,
-    adjust: true,
+    adjust: true
+  }, /*#__PURE__*/React.createElement(Typography, {
     className: styles.tabText
-  }, text), children ? /*#__PURE__*/React.createElement(Box, {
+  }, text)), children ? /*#__PURE__*/React.createElement(Box, {
     shrink: true
   }, children) : null));
 }

package/es/Tab/Tabs.js

@@ -32,19 +32,7 @@ class Tabs extends React.Component {
       tabKeys: []
     };
     bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
-    const debounce = function (cb) {
-      let timer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-      let timeoutId = null;
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-          cb();
-        }, timer);
-      };
-    };
-    this.tabsObserver = new ResizeObserver(debounce(this.onResize));
+    this.tabsObserver = new ResizeObserver(this.onResize);
     this.tabObserver = {};
   }
   onTabResize(size, target) {
@@ -227,16 +215,15 @@ class Tabs extends React.Component {
       isResponsive
     } = this.props;
     if (this.tabsEle && isResponsive) {
-      // if (!timer) {
-      //   this.onSizeChange();
-      // } else {
-      //   setTimeout(() => {
-      this.onSizeChange();
-      // }, timer);
-      // }
+      if (!timer) {
+        this.onSizeChange();
+      } else {
+        setTimeout(() => {
+          this.onSizeChange();
+        }, timer);
+      }
     }
   }
-
   getTotalDimension() {
     let {
       align

package/es/Tab/Tabs.module.css

@@ -122,6 +122,12 @@
 }
 
 
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+}
+
+
 [dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
@@ -131,6 +137,11 @@
   left: calc(var(--tab_position_gap) * -1);
 }
 
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+}
+
 [dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
   left: calc(var(--tab_position_gap) * -1);
 }

package/es/Tag/Tag.js

@@ -5,6 +5,7 @@ import { Icon } from '@zohodesk/icons';
 import Avatar from '../Avatar/Avatar';
 import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';
+import Typography from '../Typography/Typography';
 import { getUniqueId } from '../Provider/IdProvider';
 import style from './Tag.module.css';
 
@@ -117,10 +118,14 @@ export default class Tag extends PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
-    })) : null, /*#__PURE__*/React.createElement("div", {
+    })) : null, /*#__PURE__*/React.createElement(Typography, {
       className: `${style.text} ${textSizes}`,
-      "aria-hidden": true,
-      id: getAriaId
+      a11y: {
+        'aria-hidden': true
+      },
+      customProps: {
+        id: getAriaId
+      }
     }, text), onRemove && /*#__PURE__*/React.createElement(Button, {
       customClass: `${style.close} ${active ? style[`active${closePalette}Close`] : ''}
             ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}