@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-257.1

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -1,215 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`ListItemWithRadio ListItemWithRadio with renderLeftValuePlaceholderNode & it's custom class 1`] = `
-<DocumentFragment>
-  <li
-    class="flex row alignItems_center list medium default withBorder"
-    data-a11y-inset-focus="true"
-    data-id="listItemWithRadioComp"
-    data-selector-id="listItemWithRadio"
-    data-test-id="listItemWithRadioComp"
-    role="option"
-    tabindex="0"
-  >
-    <div
-      class="noShrink contentWrapper"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div
-        class="iconBox lhsJustifyContent_center"
-        data-id="listItemWithRadioComp_radio"
-        data-test-id="listItemWithRadioComp_radio"
-      >
-        <div
-          class="noShrink alignSelf_start lhsBoxInner"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            aria-checked="false"
-            aria-hidden="true"
-            aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
-            data-id="RadioComp"
-            data-selector-id="container"
-            data-test-id="RadioComp"
-            role="radio"
-            tabindex="-1"
-          >
-            <div
-              class="noShrink radio hoverprimary medium filled centerPathprimary"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <input
-                type="hidden"
-                value=""
-              />
-              <label
-                class="radioLabel pointer"
-              >
-                <svg
-                  viewBox="0 0 40 40"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    class="rdBox"
-                    cx="20"
-                    cy="20"
-                    r="19"
-                  />
-                </svg>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="noShrink titleBox"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="basis_auto noShrink customLeftValuePlaceholderClass"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            <div>
-              Left Placeholder
-            </div>
-          </div>
-          <div
-            class="basis_auto shrink value"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            List
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`ListItemWithRadio ListItemWithRadio with renderLeftValuePlaceholderNode 1`] = `
-<DocumentFragment>
-  <li
-    class="flex row alignItems_center list medium default withBorder"
-    data-a11y-inset-focus="true"
-    data-id="listItemWithRadioComp"
-    data-selector-id="listItemWithRadio"
-    data-test-id="listItemWithRadioComp"
-    role="option"
-    tabindex="0"
-  >
-    <div
-      class="noShrink contentWrapper"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <div
-        class="iconBox lhsJustifyContent_center"
-        data-id="listItemWithRadioComp_radio"
-        data-test-id="listItemWithRadioComp_radio"
-      >
-        <div
-          class="noShrink alignSelf_start lhsBoxInner"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            aria-checked="false"
-            aria-hidden="true"
-            aria-readonly="false"
-            class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
-            data-id="RadioComp"
-            data-selector-id="container"
-            data-test-id="RadioComp"
-            role="radio"
-            tabindex="-1"
-          >
-            <div
-              class="noShrink radio hoverprimary medium filled centerPathprimary"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <input
-                type="hidden"
-                value=""
-              />
-              <label
-                class="radioLabel pointer"
-              >
-                <svg
-                  viewBox="0 0 40 40"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    class="rdBox"
-                    cx="20"
-                    cy="20"
-                    r="19"
-                  />
-                </svg>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flexible basis_zero noShrink leftBox selfAlign_center"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="noShrink titleBox"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="basis_auto noShrink"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            <div>
-              Left Placeholder
-            </div>
-          </div>
-          <div
-            class="basis_auto shrink value"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            List
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
 exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>
   <li

package/lib/ListItem/props/defaultProps.js

@@ -92,7 +92,6 @@ var ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customTitleBoxClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
   needMultiLineText: false,

package/lib/ListItem/props/propTypes.js

@@ -94,7 +94,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "renderLeftValuePlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -102,8 +102,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string,
-  customValueRightPlaceholder: _propTypes["default"].string,
-  customLeftValuePlaceholder: _propTypes["default"].string
+  customValueRightPlaceholder: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object,
   ContainerProps: _propTypes["default"].object,
@@ -132,7 +131,6 @@ var ListItemWithCheckBox_Props = {
   secondaryValue: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -144,8 +142,7 @@ var ListItemWithCheckBox_Props = {
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
     customLabel: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string,
-    customLeftValuePlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };
@@ -174,7 +171,6 @@ var ListItemWithIcon_Props = {
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -185,8 +181,6 @@ var ListItemWithIcon_Props = {
   needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
   customValueRightPlaceholderClass: _propTypes["default"].string,
-  customLeftValuePlaceholderClass: _propTypes["default"].string,
-  customTitleBoxClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
@@ -216,7 +210,6 @@ var ListItemWithRadio_Props = {
   secondaryValue: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderLeftValuePlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -228,8 +221,7 @@ var ListItemWithRadio_Props = {
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,
     customRadioWrap: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string,
-    customLeftValuePlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };

package/lib/Tab/Tab.js

@@ -15,10 +15,6 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("../Layout");
 
-var _icons = require("@zohodesk/icons");
-
-var _utils = require("@zohodesk/utils");
-
 var _Common = require("../utils/Common");
 
 var _tabConfigs = require("./utils/tabConfigs");
@@ -45,10 +41,6 @@ var tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
-  },
-  "default": {
-    active: 'defaultActive',
-    tab: 'tabDefault'
   }
 };
 
@@ -75,30 +67,11 @@ function Tab(_ref) {
       isAnimate = _ref.isAnimate,
       needBorder = _ref.needBorder,
       needAppearance = _ref.needAppearance,
-      needHover = _ref.needHover,
-      hoverOnActive = _ref.hoverOnActive,
       align = _ref.align,
       isVirtual = _ref.isVirtual,
       contentAlign = _ref.contentAlign,
       contentAlignBox = _ref.contentAlignBox,
-      customProps = _ref.customProps,
-      customClass = _ref.customClass,
-      variant = _ref.variant,
-      iconName = _ref.iconName,
-      iconSize = _ref.iconSize,
-      renderBefore = _ref.renderBefore,
-      renderAfter = _ref.renderAfter,
-      borderPosition = _ref.borderPosition;
-  var _customClass$customTe = customClass.customTextContainer,
-      customTextContainer = _customClass$customTe === void 0 ? '' : _customClass$customTe,
-      _customClass$customTe2 = customClass.customText,
-      customText = _customClass$customTe2 === void 0 ? '' : _customClass$customTe2,
-      _customClass$customHo = customClass.customHover,
-      customHover = _customClass$customHo === void 0 ? '' : _customClass$customHo,
-      _customClass$customIc = customClass.customIconContainer,
-      customIconContainer = _customClass$customIc === void 0 ? '' : _customClass$customIc,
-      _customClass$customIc2 = customClass.customIcon,
-      customIcon = _customClass$customIc2 === void 0 ? '' : _customClass$customIc2;
+      customProps = _ref.customProps;
   var clickListener = (0, _react.useCallback)(function (event) {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -118,33 +91,10 @@ function Tab(_ref) {
   var getTab = (0, _react.useCallback)(function (ref) {
     return getTabRef && getTabRef(id, ref, isVirtual);
   }, [id, isVirtual]);
-  var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")], needHover && hoverOnActive && tabTypes[type] && _TabModule["default"]["".concat(type, "Hover")], hoverOnActive && customHover]);
+  var activeWithAppearance = (0, _Common.cs)([_TabModule["default"][styleContent.active], needBorder && !isAnimate && _TabModule["default"]["".concat(styleContent.active, "_border")]]);
   var activeClasses = (0, _Common.cs)([needAppearance && activeWithAppearance, activeClass]);
-  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], needHover && tabTypes[type] && _TabModule["default"]["".concat(type, "Hover")], customHover]);
-  var isVerticalAlign = _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column';
-  var isIconWithText = variant === _tabConfigs.VARIANT.ICON_WITH_TEXT;
-  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, isVerticalAlign ? _TabModule["default"].vertical : _TabModule["default"].horizontal, needAppearance && _TabModule["default"]["".concat(type, "_").concat(isVerticalAlign ? 'inline' : 'block')], isDisabled && _TabModule["default"].disabled, needBorder && borderPosition && !isAnimate && needAppearance && _TabModule["default"]["".concat(borderPosition, "_border")], isActive ? activeClasses : inActiveClasses, className]);
-
-  var _renderIcon = function _renderIcon() {
-    var showIcon = variant !== _tabConfigs.VARIANT.TEXT && iconName;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-      className: (0, _Common.cs)([_TabModule["default"].iconWrapper, customIconContainer])
-    }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
-      name: iconName,
-      size: iconSize,
-      className: customIcon
-    })) : null);
-  };
-
-  var _renderLabel = function _renderLabel() {
-    var showText = variant !== _tabConfigs.VARIANT.ICON && text !== undefined && text !== null;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-      flexible: true,
-      adjust: true,
-      className: (0, _Common.cs)([_TabModule["default"].tabText, customText])
-    }, text) : null);
-  };
-
+  var inActiveClasses = needAppearance && (0, _Common.cs)([_TabModule["default"][styleContent.tab], tabTypes[type] && _TabModule["default"]["".concat("".concat(type, "Hover"))]]);
+  var tabClass = (0, _Common.cs)([_TabModule["default"].tab, _tabConfigs.TAB_DIRECTION_MAPPING[align] === 'column' ? _TabModule["default"].vertical : _TabModule["default"].horizontal, isDisabled && _TabModule["default"].disabled, needBorder && !isAnimate && needAppearance && _TabModule["default"].border, isActive ? activeClasses : inActiveClasses, className]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -167,12 +117,14 @@ function Tab(_ref) {
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: contentAlignBox,
     align: contentAlign,
-    className: (0, _Common.cs)([_TabModule["default"].textContainer, customTextContainer])
-  }, (0, _utils.isRenderable)(renderBefore) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    shrink: true
-  }, (0, _utils.renderNode)(renderBefore)) : null, _renderIcon(), _renderLabel(), (0, _utils.isRenderable)(renderAfter) || children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _TabModule["default"].textContainer
+  }, text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    adjust: true,
+    className: _TabModule["default"].tabText
+  }, text), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     shrink: true
-  }, (0, _utils.isRenderable)(renderAfter) ? (0, _utils.renderNode)(renderAfter) : children) : null));
+  }, children) : null));
 }
 
 Tab.defaultProps = _defaultProps.Tab_defaultProps;

package/lib/Tab/Tab.module.css

@@ -11,9 +11,6 @@
   width: 100% ;
   max-width: 100% ;
 }
-.textContainer {
-  gap: var(--zd_size4) ;
-}
 .textContainer,
 .tabText {
   max-width: inherit ;
@@ -24,17 +21,8 @@
 .disabled {
   cursor: not-allowed;
 }
-.left_border {
-  border-inline-start: 1px solid var(--zdt_tab_default_border);
-}
-.right_border {
-  border-inline-end: 1px solid var(--zdt_tab_default_border);
-}
-.top_border {
-  border-block-start: 1px solid var(--zdt_tab_default_border);
-}
-.bottom_border {
-  border-block-end: 1px solid var(--zdt_tab_default_border);
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
 }
 
 .alpha,
@@ -71,6 +59,7 @@
   padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
+  margin-inline-end: var(--zd_size40) ;
   text-transform: capitalize;
 }
 .tabBeta {
@@ -89,6 +78,7 @@
   padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
+  margin-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;
@@ -101,61 +91,3 @@
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
 }
-
-.default {
-  transition: all var(--zd_transition2);
-  padding-inline: 0 ;
-  padding-block: 0 ;
-  font-size: var(--zd_font_size11) ;
-  line-height: 3;
-}
-.tabDefault {
-  composes: default;
-  color: var(--zd-text-secondary);
-}
-
-.defaultHover:hover {
-  background-color: var(--zdt_tab_default_hover_bg);
-}
-
-.defaultActive {
-  composes: default;
-  color: var(--zd-text-primary);
-}
-
-.defaultActive_border {
-  border-color: var(--zdt_tab_default_border_active);
-}
-
-/* vertical / vertical-reverse: margin-inline-end */
-.beta_inline {
-  margin-inline-end: var(--zd_size40) ;
-}
-.delta_inline {
-  margin-inline-end: var(--zd_size10) ;
-}
-.default_inline {
-  margin-inline-end: var(--zd_size34) ;
-}
-/* horizontal / horizontal-reverse: margin-block-end */
-.beta_block {
-  margin-block-end: var(--zd_size40) ;
-}
-.delta_block {
-  margin-block-end: var(--zd_size10) ;
-}
-.default_block {
-  margin-block-end: var(--zd_size6) ;
-}
-.iconWrapper {
-  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
-  flex: 0 0 var(--zd_size24) ;
-  min-width: var(--zd_size24) ;
-}
-.icon_block, .icon_inline {
-  padding: var(--zd_size10) ;
-}
-.text_block,
-.iconWithText_block {
-  padding-inline: var(--zd_size10) ;
-}

package/lib/Tab/TabWrapper.js

@@ -46,11 +46,9 @@ function TabWrapper(_ref) {
       needPadding = _ref.needPadding,
       needAppearance = _ref.needAppearance,
       align = _ref.align,
-      alignBorderPosition = _ref.alignBorderPosition,
       dataId = _ref.dataId,
       children = _ref.children,
-      dataSelectorId = _ref.dataSelectorId,
-      borderPosition = _ref.borderPosition;
+      dataSelectorId = _ref.dataSelectorId;
 
   var _useState = (0, _react.useState)(!hookToDisableInternalState ? defaultTab || 0 : null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -82,9 +80,7 @@ function TabWrapper(_ref) {
       needPadding: needPadding,
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
-      align: align,
-      alignBorderPosition: alignBorderPosition,
-      borderPosition: borderPosition
+      align: align
     }));
   }));
 }