@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/es/Select/Select.js

@@ -2,8 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /**** Libraries ****/
 import React, { Component } from 'react';
-import { Select_defaultProps } from './props/defaultProps';
-import { Select_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';
@@ -933,8 +932,125 @@ export class SelectComponent extends Component {
   }
 
 }
-SelectComponent.propTypes = Select_propTypes;
-SelectComponent.defaultProps = Select_defaultProps;
+SelectComponent.propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  autoSelectDebouneTime: PropTypes.number,
+  autoSelectOnType: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  boxSize: PropTypes.string,
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string,
+  excludeOptions: PropTypes.array,
+  getChildren: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  getCustomEmptyState: PropTypes.func,
+  getFooter: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPopupHandlers: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isDefaultSelectValue: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isParentBased: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needCloseOnSelect: PropTypes.bool,
+  needListBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needSelectDownIcon: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onAddNewOption: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }))]).isRequired,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })]),
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  htmlId: PropTypes.string,
+  children: PropTypes.node,
+  onFocus: PropTypes.func,
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  })
+};
+SelectComponent.defaultProps = {
+  animationStyle: 'bounce',
+  autoComplete: getLibraryConfig('autoComplete'),
+  autoSelectOnType: true,
+  dataId: 'selectComponent',
+  dropBoxSize: 'small',
+  isDefaultSelectValue: true,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needBorder: true,
+  needLocalSearch: true,
+  needSearch: false,
+  needSelectDownIcon: true,
+  placeHolder: '',
+  searchBoxPlaceHolder: 'Search',
+  searchBoxSize: 'small',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  textField: 'text',
+  valueField: 'id',
+  borderColor: 'default',
+  needTick: true,
+  boxSize: 'default',
+  needListBorder: false,
+  needCloseOnSelect: true,
+  isParentBased: true,
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  iconOnHover: false,
+  customProps: {}
+};
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;

package/es/Select/Select.module.css

@@ -68,22 +68,12 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: var(--zd_size30);
-}
-
-[dir=ltr] .leftIcon {
   left: 0;
+  width: var(--zd_size30);
 }
-
-[dir=rtl] .leftIcon {
-  right: 0;
-}
-[dir=ltr] .iconSelect {
+.iconSelect {
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30);
-}
 
 .dropBoxList {
   padding: var(--zd_size10) 0;

package/es/Select/SelectWithAvatar.js

@@ -1,7 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { SelectWithAvatar_defaultProps } from './props/defaultProps';
-import { SelectWithAvatar_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import { SelectComponent } from './Select';
@@ -315,8 +314,85 @@ class SelectWithAvatarComponent extends SelectComponent {
 
 }
 
-SelectWithAvatarComponent.propTypes = SelectWithAvatar_propTypes;
-SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
+SelectWithAvatarComponent.propTypes = {
+  animationStyle: PropTypes.string,
+  avatarPalette: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string,
+  excludeOptions: PropTypes.array,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getRef: PropTypes.func,
+  groupName: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onRemove: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    text: PropTypes.string,
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(['small', 'medium']),
+  tagSize: PropTypes.string,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
+};
+SelectWithAvatarComponent.defaultProps = {
+  animationStyle: 'bounce',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  isDefaultSelectValue: false,
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  needLocalSearch: true,
+  needSearch: true,
+  placeHolder: '',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  textField: 'text',
+  valueField: 'id',
+  dataId: 'selectWithAvatar',
+  borderColor: 'default',
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  needEffect: true
+};
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);
 SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;

package/es/Select/SelectWithIcon.js

@@ -1,7 +1,6 @@
 import "core-js/modules/es.array.includes";
 import React, { Component } from 'react';
-import { SelectWithIcon_defaultProps } from './props/defaultProps';
-import { SelectWithIcon_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';
@@ -452,8 +451,74 @@ class SelectWithIcon extends Component {
 
 }
 
-SelectWithIcon.propTypes = SelectWithIcon_propTypes;
-SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
+SelectWithIcon.propTypes = {
+  animationStyle: PropTypes.oneOf(['default', 'bounce']),
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  dataId: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  idKey: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needIcon: PropTypes.bool,
+  needListBorder: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchEmptyMessage: PropTypes.string,
+  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selectedValue: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  togglePopup: PropTypes.func,
+  valueKey: PropTypes.string,
+  htmlId: PropTypes.string
+};
+SelectWithIcon.defaultProps = {
+  isReadOnly: false,
+  isDisabled: false,
+  animationStyle: 'bounce',
+  valueKey: 'value',
+  idKey: 'id',
+  needListBorder: false,
+  needSearch: false,
+  boxSize: 'default',
+  needListBorder: false,
+  needCloseOnSelect: true,
+  borderColor: 'default',
+  needTick: true,
+  searchBoxSize: 'small',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  dataId: 'selectWithIcon',
+  dropBoxSize: 'small',
+  needIcon: true,
+  iconSize: '14',
+  i18nKeys: {}
+};
 
 if (false) {
   SelectWithIcon.docs = {

package/es/Stencils/Stencils.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
 import style from './Stencils.module.css';
@@ -20,8 +19,22 @@ export default class Stencils extends React.PureComponent {
   }
 
 }
-Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps;
+Stencils.propTypes = {
+  palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
+  shape: PropTypes.oneOf(['rect', 'circle']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
+  customClass: PropTypes.string
+};
+Stencils.defaultProps = {
+  palette: 'primary',
+  shape: 'rect',
+  size: 'medium',
+  customClass: ''
+}; // Stencils.propTypesDescription = {
+//   shape: ' ',
+//   size: ' ',
+//   palette: ' '
+// };
 
 if (false) {
   Stencils.docs = {

package/es/Stencils/Stencils.module.css

@@ -11,23 +11,14 @@
   border-radius: var(--stencil_border_radius);
 }
 .stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-name: placeHolderShimmer;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
+  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer-ltr {
+@keyframes placeHolderShimmer {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -36,15 +27,6 @@
     background-position: var(--zd_size468) 0;
   }
 }
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
 
 .rectangular {
   composes: stencil;

package/es/Switch/Switch.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { PropTypes } from 'prop-types';
 import { Container, Box } from '../Layout';
 import Label from '../Label/Label';
 import style from './Switch.module.css';
@@ -87,8 +86,42 @@ export default class Switch extends React.Component {
   }
 
 }
-Switch.defaultProps = defaultProps;
-Switch.propTypes = propTypes;
+Switch.defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {}
+};
+Switch.propTypes = {
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customSwitchWrap: PropTypes.string,
+    customSwitch: PropTypes.string,
+    customSwitchSize: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    SwitchProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};
 
 if (false) {
   Switch.docs = {

package/es/Switch/Switch.module.css

@@ -26,11 +26,11 @@
   border-radius: 20px;
   cursor: pointer;
 }
-.effect:hover .label
-/* .effect:focus .label */
- {
+.effect:hover .label,
+.effect:focus .label {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
+/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
@@ -47,6 +47,7 @@
 .checked + .label:after {
   right: calc(var(--zd_size1) * -1);
 }
+/*rtl:end:ignore*/
 
 .input {
   display: none;
@@ -55,12 +56,14 @@
   height: var(--zd_size14);
   width: var(--zd_size28);
 }
+/*rtl:begin:ignore*/
 .switch_smallLabel {
   height: var(--zd_size9);
   width: var(--zd_size22);
   top: calc(var(--zd_size2) * -1);
   left: var(--zd_size2);
 }
+/*rtl:end:ignore*/
 .switch_smallLabel:after {
   width: var(--zd_size12);
   height: var(--zd_size12);
@@ -70,21 +73,23 @@
   height: var(--zd_size18);
   width: var(--zd_size34);
 }
+/*rtl:begin:ignore*/
 .switch_mediumLabel {
   height: var(--zd_size13);
   width: var(--zd_size31);
   top: var(--zd_size2);
   left: var(--zd_size2);
 }
+/*rtl:end:ignore*/
 .switch_mediumLabel:after {
   width: var(--zd_size18);
   height: var(--zd_size18);
   top: calc(var(--zd_size3) * -1);
 }
 .input:disabled + .label {
-  opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
+  opacity: 0.4;
 }
 .switch {
   display: inline-block;
@@ -102,10 +107,5 @@
 .switch + label {
   position: relative;
   top: calc(var(--zd_size1) * -1);
-}
-[dir=ltr] .switch + label {
   margin-left: var(--zd_size12);
-}
-[dir=rtl] .switch + label {
-  margin-right: var(--zd_size12);
 }

package/es/Tab/Tab.js

@@ -4,8 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'zetaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta', 'tabZeta', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'zetaActive_border', 'deltaActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from './props/defaultProps';
-import { Tab_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { Box, Container } from '../Layout';
 import { cs } from '../utils/Common';
 import styles from './Tab.module.css';
@@ -99,8 +98,36 @@ export default function Tab(_ref) {
     shrink: true
   }, children) : null));
 }
-Tab.defaultProps = Tab_defaultProps;
-Tab.propTypes = Tab_propTypes;
+Tab.defaultProps = {
+  dataId: 'tabMenu',
+  customProps: {}
+};
+Tab.propTypes = {
+  activeClass: PropTypes.string,
+  align: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getTabRef: PropTypes.func,
+  href: PropTypes.string,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  style: PropTypes.object,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  tourId: PropTypes.string,
+  type: PropTypes.string,
+  customProps: PropTypes.object,
+  isVirtual: PropTypes.bool
+};
 
 if (false) {
   Tab.docs = {

package/es/Tab/Tab.module.css

@@ -1,9 +1,9 @@
 .tab {
   text-transform: uppercase;
+  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
   letter-spacing: 0.6px;
   text-decoration: none;
-  cursor: pointer;
 }
 .vertical {
   height: 100%;
@@ -32,9 +32,9 @@
   transition: all var(--zd_transition2);
 }
 .alpha {
+  padding: 0 var(--zd_size18);
   font-size: var(--zd_font_size11);
   line-height: var(--zd_size33);
-  padding: 0 var(--zd_size18);
 }
 .tabAlpha {
   composes: alpha;
@@ -48,23 +48,19 @@
   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 {
+  padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size14);
   line-height: var(--zd_size60);
-  text-transform: capitalize;
-  padding: 0 var(--zd_size4);
-}
-[dir=ltr] .beta {
   margin-right: var(--zd_size40);
-}
-[dir=rtl] .beta {
-  margin-left: var(--zd_size40);
+  text-transform: capitalize;
 }
 .tabBeta {
   composes: beta;
@@ -78,16 +74,11 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
+  padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size11);
   line-height: var(--zd_size33);
-  padding: 0 var(--zd_size4);
-}
-[dir=ltr] .delta {
   margin-right: var(--zd_size10);
 }
-[dir=rtl] .delta {
-  margin-left: var(--zd_size10);
-}
 .tabDelta {
   composes: delta;
   color: var(--zdt_tab_alpha_text);

package/es/Tab/TabContent.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { TabContent_defaultProps } from './props/defaultProps';
-import { TabContent_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
@@ -23,6 +22,13 @@ const TabContent = _ref => {
   }, children);
 };
 
-TabContent.defaultProps = TabContent_defaultProps;
-TabContent.propTypes = TabContent_propTypes;
+TabContent.defaultProps = {
+  dataId: 'tabContent'
+};
+TabContent.propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  id: PropTypes.string,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none'])
+};
 export default TabContent;