@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256

package/es/Select/SelectWithAvatar.js

@@ -118,10 +118,9 @@ class SelectWithAvatarComponent extends SelectComponent {
     }
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -268,97 +267,94 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        isPadding: false,
-        isResponsivePadding: true,
-        alignBox: "row",
-        dataId: `${dataId}_dropbox`,
-        customClass: {
-          customDropBox: dropBoxClass
-        }
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${selectStyle.search} ${selectStyle[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        dataId: `${dataId}_search`,
-        a11y: {
-          ariaAutocomplete: 'list',
-          ariaControls: setAriaId,
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false
-      }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-        eleRef: this.suggestionContainerRef
-      }, groupName ? /*#__PURE__*/React.createElement("div", {
-        className: style.title
-      }, /*#__PURE__*/React.createElement(DropDownHeading, {
-        text: groupName,
-        a11y: {
-          role: 'heading'
-        }
-      })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        dataId: `${dataId}_Options`,
-        activeId: selectedId,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        needTick: true,
-        needBorder: false,
-        selectedOptions: [selectedId],
-        className: selectStyle.listItemContainer,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        renderCustomEmptyState: renderCustomEmptyState,
-        dataId: dataId,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))))));
-    }) : null);
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: true,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      isPadding: false,
+      isResponsivePadding: true,
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`,
+      customClass: {
+        customDropBox: dropBoxClass
+      }
+    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      onScroll: this.handleScroll
+    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+      className: `${selectStyle.search} ${selectStyle[size]}`
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      inputRef: this.searchInputRef,
+      maxLength: maxLength,
+      onChange: this.handleSearch,
+      onKeyDown: this.handleKeyDown,
+      placeHolder: searchBoxPlaceHolder,
+      size: searchBoxSize,
+      value: searchStr,
+      onClear: this.handleClearSearch,
+      dataId: `${dataId}_search`,
+      a11y: {
+        ariaAutocomplete: 'list',
+        ariaControls: setAriaId,
+        ariaDescribedby: ariaErrorId
+      },
+      autoComplete: false
+    }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
+      eleRef: this.suggestionContainerRef
+    }, groupName ? /*#__PURE__*/React.createElement("div", {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: groupName,
+      a11y: {
+        role: 'heading'
+      }
+    })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      dataId: `${dataId}_Options`,
+      activeId: selectedId,
+      suggestions: suggestions,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverIndex,
+      onClick: this.handleChange,
+      onMouseEnter: this.handleMouseEnter,
+      needTick: true,
+      needBorder: false,
+      selectedOptions: [selectedId],
+      className: selectStyle.listItemContainer,
+      htmlId: setAriaId,
+      a11y: {
+        ariaParentRole: 'listbox',
+        role: 'option'
+      }
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      renderCustomEmptyState: renderCustomEmptyState,
+      dataId: dataId,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);
   }
 
 }

package/es/Select/SelectWithIcon.js

@@ -268,8 +268,7 @@ class SelectWithIcon extends Component {
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
   }
 
-  handleFetchOptions(APICall) {
-    let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchValue = '') {
     let {
       isFetchingOptions = false
     } = this.state;
@@ -300,10 +299,9 @@ class SelectWithIcon extends Component {
     }
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -459,112 +457,109 @@ class SelectWithIcon extends Component {
     })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position,
+      isActive: isPopupReady,
+      isAnimate: true,
+      isArrow: false,
+      onClick: removeClose,
+      getRef: getContainerRef,
+      needResponsive: needResponsive,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      dataId: `${dataId}_suggestions`,
+      size: boxSize,
+      isPadding: false,
+      isResponsivePadding: true,
+      alignBox: "row",
+      customClass: {
+        customDropBox: dropBoxClass
+      }
+    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      onScroll: this.handleScroll,
+      htmlId: setAriaId,
+      a11y: {
+        role: 'listbox'
+      }
+    }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+      className: `${style.search} ${style[size]}`
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      onClear: this.onSearchClear,
+      onChange: this.onSearch,
+      placeHolder: searchBoxPlaceHolder,
+      value: searchValue,
+      maxLength: maxLength,
+      onKeyDown: this.handleKeyDown,
+      inputRef: this.searchInputRef,
+      size: searchBoxSize,
+      dataId: `${dataId}_search`,
+      a11y: {
+        ariaDescribedby: ariaErrorId
+      },
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: DropdownSearchTextBoxProps
+      }
+    }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+      customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
+      shrink: true,
+      eleRef: this.scrollContentRef,
+      dataId: `${dataId}_Options`
+    }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
       let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        getRef: getContainerRef,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        dataId: `${dataId}_suggestions`,
-        size: boxSize,
-        isPadding: false,
-        isResponsivePadding: true,
-        alignBox: "row",
-        customClass: {
-          customDropBox: dropBoxClass
-        }
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        onScroll: this.handleScroll,
-        htmlId: setAriaId,
+        iconName,
+        iconSize,
+        iconColor
+      } = options;
+      return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+        key: options[idKey],
+        value: options[valueKey],
+        secondaryValue: options[secondaryValueKey],
+        size: "medium",
+        onClick: this.handleChange,
+        id: options[idKey],
+        index: i,
+        title: options[valueKey],
+        palette: "default",
+        dataId: options[idKey],
+        iconName: iconName,
+        iconSize: iconSize,
+        iconClass: iconColor,
+        active: selectedId === options[idKey],
+        needBorder: needListBorder,
+        needTick: needTick,
+        onMouseEnter: this.handleMouseEnter,
+        highlight: selectedIndex === i,
+        getRef: this.itemRef,
         a11y: {
-          role: 'listbox'
+          role: 'option',
+          ariaSelected: selectedId === options[idKey],
+          ariaLabel: options[valueKey]
         }
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${style.search} ${style[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        onClear: this.onSearchClear,
-        onChange: this.onSearch,
-        placeHolder: searchBoxPlaceHolder,
-        value: searchValue,
-        maxLength: maxLength,
-        onKeyDown: this.handleKeyDown,
-        inputRef: this.searchInputRef,
-        size: searchBoxSize,
-        dataId: `${dataId}_search`,
-        a11y: {
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false,
-        customProps: {
-          TextBoxProps: DropdownSearchTextBoxProps
-        }
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-        shrink: true,
-        eleRef: this.scrollContentRef,
-        dataId: `${dataId}_Options`
-      }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
-        let {
-          iconName,
-          iconSize,
-          iconColor
-        } = options;
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-          key: options[idKey],
-          value: options[valueKey],
-          secondaryValue: options[secondaryValueKey],
-          size: "medium",
-          onClick: this.handleChange,
-          id: options[idKey],
-          index: i,
-          title: options[valueKey],
-          palette: "default",
-          dataId: options[idKey],
-          iconName: iconName,
-          iconSize: iconSize,
-          iconClass: iconColor,
-          active: selectedId === options[idKey],
-          needBorder: needListBorder,
-          needTick: needTick,
-          onMouseEnter: this.handleMouseEnter,
-          highlight: selectedIndex === i,
-          getRef: this.itemRef,
-          a11y: {
-            role: 'option',
-            ariaSelected: selectedId === options[idKey],
-            ariaLabel: options[valueKey]
-          }
-        }, ListItemProps));
-      })) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchValue,
-        suggestions: options,
-        renderCustomEmptyState: renderCustomEmptyState,
-        dataId: dataId,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))))));
-    }) : null);
+      }, ListItemProps));
+    })) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchValue,
+      suggestions: options,
+      renderCustomEmptyState: renderCustomEmptyState,
+      dataId: dataId,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);
   }
 
 }

package/es/Select/__tests__/Select.spec.js

@@ -618,15 +618,12 @@ describe('Select -', () => {
   });
   test('Should trigger onAddNewOption, when click on the custom search empty state button', () => {
     const addMessage = 'Add New Option';
-    const getCustomEmptyState = jest.fn(_ref => {
-      let {
-        searchString,
-        onAddNewOption
-      } = _ref;
-      return /*#__PURE__*/React.createElement("button", {
-        onClick: onAddNewOption
-      }, addMessage);
-    });
+    const getCustomEmptyState = jest.fn(({
+      searchString,
+      onAddNewOption
+    }) => /*#__PURE__*/React.createElement("button", {
+      onClick: onAddNewOption
+    }, addMessage));
     const mockOnAddNewOption = jest.fn();
     const {
       getByRole,

package/es/Tab/Tab.js

@@ -2,14 +2,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint-disable react/forbid-component-props */
 
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border', 'tabDefault', 'defaultHover', 'defaultActive', 'defaultActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from "./props/defaultProps";
 import { Tab_propTypes } from "./props/propTypes";
 import { Box, Container } from "../Layout";
 import { cs } from "../utils/Common";
-import { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
+import { TAB_DIRECTION_MAPPING, VARIANT } from "./utils/tabConfigs";
 import styles from "./Tab.module.css";
+import { renderNode, isRenderable } from '@zohodesk/utils';
+import { Icon } from '@zohodesk/icons';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',
@@ -22,38 +24,48 @@ const tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
+  },
+  default: {
+    active: 'defaultActive',
+    tab: 'tabDefault'
   }
 };
-export default function Tab(_ref) {
-  let {
-    id,
-    style,
-    text,
-    children,
-    className,
-    dataId,
-    dataSelectorId,
-    title,
-    titlePosition,
-    activeClass,
-    href,
-    isLink,
-    isDisabled,
-    tourId,
-    onClick,
-    isActive,
-    getTabRef,
-    onSelect,
-    type,
-    isAnimate,
-    needBorder,
-    needAppearance,
-    align,
-    isVirtual,
-    contentAlign,
-    contentAlignBox,
-    customProps
-  } = _ref;
+export default function Tab({
+  id,
+  style,
+  text,
+  children,
+  className,
+  dataId,
+  dataSelectorId,
+  title,
+  titlePosition,
+  activeClass,
+  href,
+  isLink,
+  isDisabled,
+  tourId,
+  onClick,
+  isActive,
+  getTabRef,
+  onSelect,
+  type,
+  isAnimate,
+  needBorder,
+  needAppearance,
+  align,
+  isVirtual,
+  contentAlign,
+  contentAlignBox,
+  customProps,
+  variant,
+  iconPlacement,
+  iconName,
+  iconSize,
+  renderIcon,
+  renderBefore,
+  renderAfter
+}) {
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -71,8 +83,50 @@ export default function Tab(_ref) {
   let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
   let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
-  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
-  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${type}Hover`]]);
+  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, variant === VARIANT.ICON && styles.tabVariantIcon, variant === VARIANT.ICON_WITH_TEXT && styles.tabVariantIconWithText, className]);
+
+  const _renderIconNode = () => {
+    if (isRenderable(renderIcon)) {
+      return renderNode(renderIcon);
+    }
+
+    if (!iconName) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize
+    });
+  };
+
+  const _renderBeforeNode = () => {
+    if (!isRenderable(renderBefore)) {
+      return null;
+    }
+
+    return renderNode(renderBefore);
+  };
+
+  const _renderAfterNode = () => {
+    if (!isRenderable(renderAfter)) {
+      return null;
+    }
+
+    return renderNode(renderAfter);
+  };
+
+  const _renderLabel = () => {
+    const showIcon = variant !== VARIANT.TEXT && (isRenderable(renderIcon) || iconName);
+    const showText = variant !== VARIANT.ICON && text !== undefined && text !== null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showIcon ? _renderIconNode() : null, showText ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      adjust: true,
+      className: styles.tabText
+    }, text) : null);
+  };
+
   return /*#__PURE__*/React.createElement(Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -96,13 +150,9 @@ export default function Tab(_ref) {
     alignBox: contentAlignBox,
     align: contentAlign,
     className: styles.textContainer
-  }, text && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    adjust: true,
-    className: styles.tabText
-  }, text), children ? /*#__PURE__*/React.createElement(Box, {
+  }, _renderBeforeNode(), _renderLabel(), children ? /*#__PURE__*/React.createElement(Box, {
     shrink: true
-  }, children) : null));
+  }, children) : null, _renderAfterNode()));
 }
 Tab.defaultProps = Tab_defaultProps;
 Tab.propTypes = Tab_propTypes; // if (__DOCS__) {

package/es/Tab/Tab.module.css

@@ -11,6 +11,9 @@
   width: 100% ;
   max-width: 100% ;
 }
+.textContainer {
+  gap: var(--zd_size4) ;
+}
 .textContainer,
 .tabText {
   max-width: inherit ;
@@ -91,3 +94,25 @@
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
 }
+
+.tabDefault {
+  transition: all var(--zd_transition2);
+  padding-inline: 0 ;
+  padding-block: 0 ;
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  margin-inline-end: var(--zd_size34) ;
+  color: var(--zd-text-secondary);
+}
+.defaultHover:hover { color: var(--zd-text-primary); }
+.defaultActive {
+  transition: all var(--zd_transition2);
+  padding-inline: 0 ;
+  padding-block: 0 ;
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  margin-inline-end: var(--zd_size34) ;
+  color: var(--zd-text-primary);
+  border-bottom: 1px solid var(--zdt_tab_alpha_active_border);
+}
+.defaultActive_border { border-color: var(--zdt_tab_alpha_active_border); }