@zohodesk/components 1.0.0-temp-190.2 → 1.0.0-temp-191

package/es/v1/Radio/Radio.js

@@ -24,6 +24,9 @@ const Radio = props => {
     active,
     isFilled,
     customClass,
+    customProps,
+    getRef,
+    children,
     a11y
   } = props;
   let {
@@ -36,11 +39,16 @@ const Radio = props => {
   let {
     ariaHidden,
     role = 'radio',
+    tabIndex,
     ariaChecked = checked,
     ariaLabel,
     ariaLabelledby,
     ariaReadonly = isReadOnly || disabled ? true : false
   } = a11y;
+  let {
+    ContainerProps = {},
+    LabelProps = {}
+  } = customProps;
 
   function onChange(e) {
     const {
@@ -49,6 +57,10 @@ const Radio = props => {
     onChange && onChange(value, e);
   }
 
+  function handleGetRef(ele) {
+    getRef && getRef(ele, value);
+  }
+
   return /*#__PURE__*/React.createElement(Container, {
     dataId: value ? value.toLowerCase() : 'RadioComp',
     isCover: false,
@@ -59,12 +71,14 @@ const Radio = props => {
     "data-title": toolTip,
     onClick: !isReadOnly && !disabled ? onChange : '',
     "aria-checked": ariaChecked,
-    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+    tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
+    eleRef: handleGetRef,
     role: role,
     "aria-Hidden": ariaHidden,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    "aria-readonly": ariaReadonly
+    "aria-readonly": ariaReadonly,
+    ...ContainerProps
   }, /*#__PURE__*/React.createElement(Box, {
     className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''}
           ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio}`
@@ -93,16 +107,17 @@ const Radio = props => {
     className: style.text
   }, /*#__PURE__*/React.createElement(Label, {
     text: text,
-    palette: disabled ? 'disable' : labelPalette,
+    palette: labelPalette,
     size: labelSize,
     type: "title",
     clipped: true,
     dataId: `${text}_label`,
     variant: variant,
     title: toolTip ? toolTip : text,
-    customClass: `${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''}
-            ${style[`${palette}Label`]} ${accessMode} ${customLabel}`
-  })));
+    customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''}
+            ${style[`${palette}Label`]} ${accessMode} ${customLabel}`,
+    ...LabelProps
+  })), children);
 };
 
 export default Radio;

package/es/v1/Radio/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   variant: 'default',
   isFilled: true,
   customClass: {},
+  customProps: {},
   a11y: {}
 };

package/es/v1/Radio/props/propTypes.js

@@ -4,6 +4,7 @@ export const propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
+  getRef: PropTypes.func,
   id: PropTypes.string,
   isFilled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -20,14 +21,20 @@ export const propTypes = {
     customRadio: PropTypes.string,
     customLabel: PropTypes.string
   }),
+  customProps: PropTypes.exact({
+    ContainerProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,
     ariaHidden: PropTypes.bool,
     role: PropTypes.string,
+    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
     ariaLabelledby: PropTypes.string,
     ariaLabel: PropTypes.string,
     ariaReadonly: PropTypes.bool
   }),
+  children: PropTypes.node,
   onChange: PropTypes.func,
   text: PropTypes.string
 };

package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js

@@ -1,11 +1,9 @@
-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); }
-
 import React, { useCallback } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import DropBox from '../DropBox/DropBox';
 import { Container } from '../Layout';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import style from '../../ResponsiveDropBox/ResponsiveDropBox.module.css';
 export default function ResponsiveDropBox(props) {
   const {
@@ -38,9 +36,9 @@ export default function ResponsiveDropBox(props) {
       }])
     };
   }, []);
-  return /*#__PURE__*/React.createElement(DropBox, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(DropBox, { ...props,
     customClass: dropBoxClasses
-  }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
     query: responsiveFunc,
     responsiveId: "Helmet"
   }, _ref2 => {

package/es/v1/Select/GroupSelect.js

@@ -16,7 +16,7 @@ import DropDownHeading from '../DropDown/DropDownHeading';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import style from '../../Select/Select.module.css';
 /**** Methods ****/
 

package/es/v1/Select/Select.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React, { Component } from 'react';
 import { Select_defaultProps } from './props/defaultProps';
@@ -16,7 +14,7 @@ import EmptyState from '../MultiSelect/EmptyState';
 import { getUniqueId } from '../../Provider/IdProvider';
 import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 
@@ -919,7 +917,7 @@ export class SelectComponent extends Component {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -936,8 +934,9 @@ export class SelectComponent extends Component {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        },
+        ...SuggestionsProps
+      }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/v1/Select/SelectWithAvatar.js

@@ -10,13 +10,13 @@ import Tag from '../Tag/Tag';
 import Textbox from '../TextBox/TextBox';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
-import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
+import Card, { CardContent, CardHeader } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** CSS ****/
 
@@ -158,9 +158,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
-      dataSelectorId,
-      getHeader,
-      getFooter
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -296,7 +294,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           role: 'heading'
         }
-      })) : null, getHeader ? getHeader() : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -323,7 +321,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
         isCover: false,
         align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
+      }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
 

package/es/v1/Select/SelectWithIcon.js

@@ -12,7 +12,7 @@ import EmptyState from '../MultiSelect/EmptyState';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 

package/es/v1/Select/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../Provider/Config';
+import { getLibraryConfig } from '../../../Provider/Config';
 export const Select_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),

package/es/v1/Select/props/propTypes.js

@@ -230,9 +230,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  getFooter: PropTypes.func,
-  getHeader: PropTypes.func
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),

package/es/v1/Switch/Switch.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -45,7 +43,7 @@ const Switch = props => {
     customLabel = ''
   } = customClass;
   size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-  return /*#__PURE__*/React.createElement(Container, _extends({
+  return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     isCover: false,
     alignBox: "row",
@@ -54,8 +52,9 @@ const Switch = props => {
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",
-    dataSelectorId: dataSelectorId
-  }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
+    dataSelectorId: dataSelectorId,
+    ...SwitchProps
+  }, /*#__PURE__*/React.createElement(Box, {
     className: `${style[size]} ${customSwitchSize}`
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
@@ -73,15 +72,16 @@ const Switch = props => {
     "data-test-id": dataId,
     className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
     tabIndex: isReadOnly || disabled ? '-1' : '0'
-  })), text && /*#__PURE__*/React.createElement(Label, _extends({
+  })), text && /*#__PURE__*/React.createElement(Label, {
     text: text,
     palette: labelPalette,
     id: id,
     size: labelSize,
     type: "subtitle",
     onClick: !disabled || !isReadOnly ? onChange : null,
-    customClass: customLabel
-  }, LabelProps)));
+    customClass: customLabel,
+    ...LabelProps
+  }));
 };
 
 Switch.defaultProps = defaultProps;

package/es/v1/Tab/Tab.js

@@ -1,5 +1,3 @@
-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); }
-
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';
 import { Tab_propTypes } from './props/propTypes';
@@ -67,7 +65,7 @@ export default function Tab(_ref) {
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
   let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
   let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
     className: tabClass,
@@ -85,8 +83,9 @@ export default function Tab(_ref) {
     "aria-selected": isActive ? true : false,
     tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
     "aria-label": text ? text : null,
-    dataSelectorId: dataSelectorId
-  }, customProps), /*#__PURE__*/React.createElement(Container, {
+    dataSelectorId: dataSelectorId,
+    ...customProps
+  }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "both",
     className: styles.textContainer

package/es/v1/Tab/TabContentWrapper.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
@@ -18,15 +16,16 @@ const TabContentWrapper = _ref => {
     tagName,
     a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
     dataSelectorId: dataSelectorId,
-    tagName: tagName
-  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+    tagName: tagName,
+    ...a11y
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;

package/es/v1/Tab/TabWrapper.js

@@ -1,5 +1,3 @@
-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); }
-
 import React, { useState, useCallback } from 'react';
 import { TabWrapper_defaultProps } from './props/defaultProps';
 import { TabWrapper_propTypes } from './props/propTypes';
@@ -37,7 +35,7 @@ function TabWrapper(_ref) {
     let TabsChild = child.type;
     let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
     return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
-    , _extends({}, child.props, {
+    , { ...child.props,
       selectedTab: selectedTab,
       onSelect: setSelectedTab,
       type: type,
@@ -48,7 +46,7 @@ function TabWrapper(_ref) {
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
       align: align
-    }));
+    });
   }));
 }
 

package/es/v1/Tab/Tabs.js

@@ -1,5 +1,3 @@
-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); }
-
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
 import Tab from './Tab';
@@ -7,13 +5,13 @@ import { Tabs_defaultProps } from './props/defaultProps';
 import { Tabs_propTypes } from './props/propTypes';
 import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
 import { Box, Container } from '../Layout';
-import ResizeObserver from '../Responsive/ResizeObserver';
+import ResizeObserver from '../../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
 import tabsStyle from './v1Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
 import btnstyle from '../../semantic/Button/semanticButton.module.css';
 
 const Tabs = props => {
@@ -394,7 +392,7 @@ const Tabs = props => {
         classProps.className = itemClass;
       }
 
-      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
+      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
         key: child.props.id,
         getTabRef: getTabRef,
         onSelect: onSelect // recalculateDimension={tabElement.current[recalculateDimension]}
@@ -405,22 +403,23 @@ const Tabs = props => {
         needBorder: needTabBorder,
         needAppearance: needAppearance,
         align: align,
-        isVirtual: isVirtual
-      }, classProps));
+        isVirtual: isVirtual,
+        ...classProps
+      });
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `,
       dataSelectorId: `${dataSelectorId}_moreIcon`
-    }, /*#__PURE__*/React.createElement(Container, _extends({
+    }, /*#__PURE__*/React.createElement(Container, {
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: togglePopupLocal,
       dataId: "moreTabs",
-      eleRef: getTargetRef
-    }, MoreButtonProps, {
+      eleRef: getTargetRef,
+      ...MoreButtonProps,
       "aria-label": "MoreTabs",
       role: "link",
       tagName: "button"
-    }), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -430,7 +429,7 @@ const Tabs = props => {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         isActive: isPopupReady,
         isAnimate: true,
         size: "medium",
@@ -440,12 +439,12 @@ const Tabs = props => {
         boxPosition: position,
         getRef: getContainerRef,
         isBoxPaddingNeed: true,
-        isArrow: false
-      }, DropBoxProps, {
+        isArrow: false,
+        ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
         onClose: togglePopupLocal
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
@@ -466,7 +465,7 @@ const Tabs = props => {
           dataId
         } = child.props;
         const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
+        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
           key: id,
           value: value,
           onClick: moreTabSelect,
@@ -479,8 +478,9 @@ const Tabs = props => {
             customListItem: menuItemClass
           },
           target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
+          dataId: `${dataId}_Tab`,
+          ...ListItemProps
+        }, !showTitleInMoreOptions ? children : null);
       })));
     })) : null);
   }

package/es/v1/Tab/v1Tab.module.css

@@ -1,26 +1,32 @@
 .tab {
   text-transform: uppercase;
+  cursor: pointer;
   letter-spacing: 0.6px;
   text-decoration: none;
-  cursor: pointer;
 }
+
 .vertical {
-  height: 100% ;
+  height: 100%;
 }
+
 .horizontal {
-  width: 100% ;
-  max-width: 100% ;
+  width: 100%;
+  max-width: 100%;
 }
+
 .textContainer,
 .tabText {
-  max-width: inherit ;
+  max-width: inherit;
 }
+
 .tabText {
   composes: dotted from '../../common/common.module.css';
 }
+
 .disabled {
   cursor: not-allowed;
 }
+
 .border {
   border-bottom: 1px solid var(--zdt_tab_default_border);
 }
@@ -30,71 +36,76 @@
 .delta {
   transition: all var(--zd_transition2);
 }
+
 .alpha {
-  font-size: var(--zd_font_size11) ;
+  padding: 0 18px;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size18) ;
 }
+
 .tabAlpha {
   composes: alpha;
   color: var(--zdt_tab_alpha_text);
 }
+
 .alphaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
   background-color: var(--zdt_tab_alpha_hover_bg);
 }
+
 .alphaActive {
   composes: alpha;
   color: var(--zdt_tab_alpha_active_text);
 }
-.alphaActive_border, .betaActive_border {
+
+.alphaActive_border,
+.betaActive_border {
   border-color: var(--zdt_tab_alpha_active_border);
 }
+
 .deltaActive_border {
   border-color: var(--zdt_tab_delta_active_border);
 }
+
 .beta {
-  font-size: var(--zd_font_size14) ;
+  padding: 0 4px;
+  font-size: 14px;
   line-height: 4.2857;
+  margin-right: 40px;
   text-transform: capitalize;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .beta {
-  margin-right: var(--zd_size40) ;
-}
-[dir=rtl] .beta {
-  margin-left: var(--zd_size40) ;
 }
+
 .tabBeta {
   composes: beta;
   color: var(--zdt_tab_alpha_text);
 }
+
 .betaHover:hover {
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .betaActive {
   composes: beta;
-  color: var(--zdt_tab_alpha_hover_text);
+  color: var(--zdt_base_color);
 }
+
 .delta {
-  font-size: var(--zd_font_size11) ;
+  padding: 0 4px;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .delta {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .delta {
-  margin-left: var(--zd_size10) ;
+  margin-right: 10px;
 }
+
 .tabDelta {
   composes: delta;
   color: var(--zdt_tab_alpha_text);
 }
+
 .deltaHover:hover {
   color: var(--zdt_tab_alpha_active_text);
 }
+
 .deltaActive {
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
-}
+}