@zohodesk/components 1.0.0-alpha-247 → 1.0.0-alpha-249

package/es/TextBox/TextBox.js

@@ -1,7 +1,8 @@
-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); }
+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 PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
 import style from './TextBox.module.css';
@@ -167,77 +168,8 @@ export default class Textbox extends React.PureComponent {
   }
 
 }
-Textbox.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  maxLength: 250,
-  needBorder: true,
-  size: 'medium',
-  type: 'text',
-  variant: 'default',
-  dataId: 'textBox',
-  needReadOnlyStyle: true,
-  needAppearance: true,
-  isClickable: false,
-  needEffect: true,
-  autoComplete: true,
-  borderColor: 'default',
-  a11y: {},
-  isFocus: false,
-  customProps: {}
-};
-Textbox.propTypes = {
-  autofocus: PropTypes.bool,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  dataId: PropTypes.string,
-  htmlId: PropTypes.string,
-  id: PropTypes.string,
-  inputRef: PropTypes.func,
-  isClickable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  name: PropTypes.string,
-  needAppearance: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  needEffect: PropTypes.bool,
-  needReadOnlyStyle: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  placeHolder: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
-  type: PropTypes.oneOf(['text', 'password', 'number']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
-  htmlId: PropTypes.string,
-  customClass: PropTypes.string,
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaAutocomplete: PropTypes.string,
-    ariaControls: PropTypes.string,
-    ariaDescribedby: PropTypes.string,
-    ariaExpanded: PropTypes.bool,
-    ariaLabel: PropTypes.string,
-    autoComplete: PropTypes.bool,
-    ariaHaspopup: PropTypes.bool,
-    ariaRequired: PropTypes.bool,
-    ariaLabelledby: PropTypes.string,
-    ariaInvalid: PropTypes.bool,
-    ariaOwns: PropTypes.string,
-    ariaActivedescendant: PropTypes.string,
-    ariaReadonly: PropTypes.bool,
-    ariaMultiselectable: PropTypes.bool
-  }),
-  isFocus: PropTypes.bool,
-  customProps: PropTypes.object
-};
+Textbox.defaultProps = defaultProps;
+Textbox.propTypes = propTypes;
 
 if (false) {
   Textbox.docs = {

package/es/TextBox/TextBox.module.css

@@ -41,20 +41,20 @@
 }
 .container {
   composes: basic;
+  background-color: var(--textbox_bg_color);
   transition: border var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
+  padding: var(--textbox_padding);
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
-  line-height: var(--textbox_line_height);
-  background-color: var(--textbox_bg_color);
-  -webkit-transition: border var(--zd_transition2) linear 0s;
-  padding: var(--textbox_padding);
   border-radius: var(--textbox_border_radius);
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
   border-color: var(--textbox_border_color);
+  line-height: var(--textbox_line_height);
 }
 .basic:disabled,
 .container:disabled,
@@ -82,17 +82,21 @@
   --textbox_cursor: pointer;
 }
 /* Need Border */
-.border, .effect:hover, .effect:focus {
+.border,
+.effect:hover,
+.effect:focus {
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
-.effect:hover, .effect:focus {
+.effect:hover,
+.effect:focus {
   border-color: var(--textbox_border_color);
 }
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
-.borderColor_transparent, .borderColor_default {
+.borderColor_transparent,
+.borderColor_default {
   border-color: var(--textbox_border_color);
 }
 .borderColor_transparent {

package/es/TextBox/props/defaultProps.js

@@ -0,0 +1,19 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  maxLength: 250,
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  dataId: 'textBox',
+  needReadOnlyStyle: true,
+  needAppearance: true,
+  isClickable: false,
+  needEffect: true,
+  autoComplete: true,
+  borderColor: 'default',
+  a11y: {},
+  isFocus: false,
+  customProps: {}
+};

package/es/TextBox/props/propTypes.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autofocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  htmlId: PropTypes.string,
+  id: PropTypes.string,
+  inputRef: PropTypes.func,
+  isClickable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  name: PropTypes.string,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  type: PropTypes.oneOf(['text', 'password', 'number']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
+  htmlId: PropTypes.string,
+  customClass: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaAutocomplete: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaDescribedby: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    autoComplete: PropTypes.bool,
+    ariaHaspopup: PropTypes.bool,
+    ariaRequired: PropTypes.bool,
+    ariaLabelledby: PropTypes.string,
+    ariaInvalid: PropTypes.bool,
+    ariaOwns: PropTypes.string,
+    ariaActivedescendant: PropTypes.string,
+    ariaReadonly: PropTypes.bool,
+    ariaMultiselectable: PropTypes.bool
+  }),
+  isFocus: PropTypes.bool,
+  customProps: PropTypes.object
+};

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,7 +1,8 @@
-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); }
+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 PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import TextBox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -156,75 +157,8 @@ export default class TextBoxIcon extends React.Component {
   }
 
 }
-TextBoxIcon.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  iconRotated: false,
-  maxLength: '250',
-  needBorder: true,
-  size: 'medium',
-  type: 'text',
-  variant: 'default',
-  needReadOnlyStyle: true,
-  isClickable: false,
-  needEffect: true,
-  dataId: 'textBoxIcon',
-  borderColor: 'default',
-  showClearIcon: false,
-  i18nKeys: {},
-  customClass: {},
-  iconOnHover: false,
-  isFocus: false,
-  customProps: {}
-};
-TextBoxIcon.propTypes = {
-  borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  htmlId: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string
-  }),
-  iconRotated: PropTypes.bool,
-  id: PropTypes.string,
-  inputRef: PropTypes.func,
-  isClickable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  maxLength: PropTypes.string,
-  name: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needEffect: PropTypes.bool,
-  needReadOnlyStyle: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onClear: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  placeHolder: PropTypes.string,
-  showClearIcon: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
-  title: PropTypes.func,
-  type: PropTypes.oneOf(['text', 'password', 'number']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  variant: PropTypes.oneOf(['primary', 'secondary', 'default']),
-  customClass: PropTypes.shape({
-    customTBoxWrap: PropTypes.string,
-    customTextBox: PropTypes.string,
-    customTBoxIcon: PropTypes.string,
-    customTBoxLine: PropTypes.string
-  }),
-  iconOnHover: PropTypes.bool,
-  isFocus: PropTypes.bool,
-  onClearMouseDown: PropTypes.func,
-  customProps: PropTypes.shape({
-    TextBoxProps: PropTypes.object
-  })
-};
+TextBoxIcon.defaultProps = defaultProps;
+TextBoxIcon.propTypes = propTypes;
 
 if (false) {
   TextBoxIcon.docs = {

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -14,8 +14,6 @@
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;
-}
-.disabled, .readonly {
   cursor: not-allowed;
 }
 .icon {
@@ -36,20 +34,15 @@
 .line {
   position: absolute;
   bottom: 0;
+  left: 0;
+  right: 0;
   min-height: 1px;
   transition: var(--zd_transition2);
-  height: var(--textboxicon_line_height);
   transform: perspective(1px);
+  height: var(--textboxicon_line_height);
 }
-[dir=ltr] .line {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .line {
-  right: 0;
-  left: 0;
-}
-.line, .borderColor_default {
+.line,
+.borderColor_default {
   background-color: var(--textboxicon_line_color);
 }
 .borderColor_transparent {

package/es/TextBoxIcon/props/defaultProps.js

@@ -0,0 +1,21 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  iconRotated: false,
+  maxLength: '250',
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  needReadOnlyStyle: true,
+  isClickable: false,
+  needEffect: true,
+  dataId: 'textBoxIcon',
+  borderColor: 'default',
+  showClearIcon: false,
+  i18nKeys: {},
+  customClass: {},
+  iconOnHover: false,
+  isFocus: false,
+  customProps: {}
+};

package/es/TextBoxIcon/props/propTypes.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string
+  }),
+  iconRotated: PropTypes.bool,
+  id: PropTypes.string,
+  inputRef: PropTypes.func,
+  isClickable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.string,
+  name: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  showClearIcon: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  title: PropTypes.func,
+  type: PropTypes.oneOf(['text', 'password', 'number']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  customClass: PropTypes.shape({
+    customTBoxWrap: PropTypes.string,
+    customTextBox: PropTypes.string,
+    customTBoxIcon: PropTypes.string,
+    customTBoxLine: PropTypes.string
+  }),
+  iconOnHover: PropTypes.bool,
+  isFocus: PropTypes.bool,
+  onClearMouseDown: PropTypes.func,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object
+  })
+};

package/es/Textarea/Textarea.js

@@ -1,7 +1,8 @@
-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); }
+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 PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
 import style from './Textarea.module.css';
@@ -104,52 +105,8 @@ export default class Textarea extends React.Component {
   }
 
 }
-Textarea.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  dataId: 'TextareaComp',
-  needBorder: true,
-  resize: 'none',
-  size: 'small',
-  variant: 'default',
-  needAppearance: true,
-  needReadOnlyStyle: true,
-  borderColor: 'default',
-  needEffect: true,
-  autoFocus: false,
-  customClass: '',
-  a11y: {}
-};
-Textarea.propTypes = {
-  animated: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  getRef: PropTypes.func,
-  htmlId: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  needAppearance: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  needEffect: PropTypes.bool,
-  needReadOnlyStyle: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  placeHolder: PropTypes.string,
-  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
-  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
-  text: PropTypes.string,
-  variant: PropTypes.oneOf(['default', 'primary']),
-  customClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    ariaLabel: PropTypes.string,
-    ariaLabelledby: PropTypes.string
-  })
-};
+Textarea.defaultProps = defaultProps;
+Textarea.propTypes = propTypes;
 
 if (false) {
   Textarea.docs = {

package/es/Textarea/Textarea.module.css

@@ -19,10 +19,11 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
+  color: var(--textarea_text_color);
 }
-.basic, .noBorder {
+.basic,
+.noBorder {
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
@@ -60,20 +61,20 @@
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   width: 100%;
   max-width: 100%;
   min-width: 100px;
+  border-style: solid;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
-  height: var(--textarea_height);
-  -webkit-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
+  height: var(--textarea_height);
 }
 .needBorder {
   --textarea_border_width: 0 0 1px 0;

package/es/Textarea/props/defaultProps.js

@@ -0,0 +1,16 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {}
+};

package/es/Textarea/props/propTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  animated: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
@@ -502,17 +503,8 @@ export default class Tooltip extends React.Component {
   }
 
 }
-Tooltip.propTypes = {
-  dataId: PropTypes.string,
-  isHtml: PropTypes.string,
-  isPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  title: PropTypes.string,
-  customClass: PropTypes.string
-};
-Tooltip.defaultProps = {
-  dataId: 'toolTip',
-  customClass: ''
-};
+Tooltip.propTypes = propTypes;
+Tooltip.defaultProps = defaultProps;
 
 if (false) {
   Tooltip.docs = {

package/es/Tooltip/Tooltip.module.css

@@ -1,28 +1,25 @@
 .tooltiptext {
   position: fixed;
   z-index: 9999999; /*Hook for editor alert*/
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
   pointer-events: none;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
 }
 .tooltipcont {
+  background-color: var(--zdt_tooltip_default_bg);
   color: var(--zdt_tooltip_default_text);
+  padding: 0 var(--zd_size10);
   font-size: var(--zd_font_size13);
   font-family: var(--zd_semibold);
   word-break: break-word;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
   max-width: 420px;
   line-height: var(--zd_size20);
   min-height: var(--zd_size24);
   overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10);
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
 }
 .tooltipWrapCont {
   white-space: pre-wrap;
@@ -30,6 +27,7 @@
 .tooltipNormalCont {
   white-space: normal;
 }
+/*rtl:begin:ignore*/
 .tooltiparrow {
   content: '';
   position: absolute;
@@ -75,6 +73,7 @@
 .arrowRight {
   transform: rotate(135deg) translateY(50%);
 }
+/*rtl:end:ignore*/
 @keyframes tooltip-grow {
   from {
     opacity: 0;

package/es/Tooltip/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  dataId: 'toolTip',
+  customClass: ''
+};

package/es/Tooltip/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  isHtml: PropTypes.string,
+  isPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  title: PropTypes.string,
+  customClass: PropTypes.string
+};