@zohodesk/components 1.0.0-temp-199.5 → 1.0.0-temp-215

package/es/Select/GroupSelect.js

@@ -591,9 +591,6 @@ export class GroupSelectComponent extends PureComponent {
       dataSelectorId,
       customProps
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -621,6 +618,10 @@ export class GroupSelectComponent extends PureComponent {
     } = normalizedFormatOptions[selectedId] || {};
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxIconProps = {},
+      TextBoxProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
@@ -663,7 +664,8 @@ export class GroupSelectComponent extends PureComponent {
       },
       i18nKeys: TextBoxIcon_i18n,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: dataIdDownIcon
@@ -700,7 +702,8 @@ export class GroupSelectComponent extends PureComponent {
         ariaOwns: setAriaId
       },
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      ...TextBoxProps
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -786,8 +789,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/SelectWithAvatar.js

@@ -163,12 +163,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      getTargetRef
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -325,8 +321,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...suggestionsProps
+        }
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -367,8 +367,7 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {},
-      listItemProps = {}
+      TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -531,8 +530,7 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          },
-          ...listItemProps
+          }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/props/defaultProps.js

@@ -96,8 +96,7 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

package/es/Select/props/propTypes.js

@@ -175,7 +175,10 @@ export const GroupSelect_propTypes = {
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool,
-  customProps: PropTypes.string
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object
+  })
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -236,8 +239,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.string
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),

package/es/Textarea/Textarea.js

@@ -58,7 +58,8 @@ export default class Textarea extends React.Component {
       autoFocus,
       htmlId,
       a11y,
-      customClass
+      customClass,
+      isFocus
     } = this.props;
     let {
       ariaLabel,
@@ -84,7 +85,8 @@ export default class Textarea extends React.Component {
       options.autoFocus = true;
     }
 
-    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
+    const isEditable = !(isReadOnly || isDisabled);
+    let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
     return /*#__PURE__*/React.createElement("textarea", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,

package/es/Textarea/Textarea.module.css

@@ -88,7 +88,7 @@
 .effect:hover {
   --textarea_border_color: var(--zdt_textarea_hover_border);
 }
-.effect:focus {
+.effect:focus,.effect.active {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
 .xsmall,

package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Textarea component Should be render autofocus true  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -14,7 +14,7 @@ exports[`Textarea component Should be render autofocus true  1`] = `
 exports[`Textarea component Should be render customClass  1`] = `
 <DocumentFragment>
   <textarea
-    class="textAreaCustomClass  container small default needBorder noresize     effect borderColor_default"
+    class="textAreaCustomClass  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -25,7 +25,7 @@ exports[`Textarea component Should be render customClass  1`] = `
 exports[`Textarea component Should be render htmlId  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -37,7 +37,7 @@ exports[`Textarea component Should be render htmlId  1`] = `
 exports[`Textarea component Should be render isDisabled is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -48,7 +48,7 @@ exports[`Textarea component Should be render isDisabled is false and needEffect
 exports[`Textarea component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize      borderColor_default"
+    class="  container small default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -60,7 +60,7 @@ exports[`Textarea component Should be render isDisabled is true 1`] = `
 exports[`Textarea component Should be render isDisabled is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize      borderColor_default"
+    class="  container small default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -72,7 +72,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isDisabled is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -84,7 +84,7 @@ exports[`Textarea component Should be render isDisabled is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is false and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -95,7 +95,7 @@ exports[`Textarea component Should be render isReadOnly is false and needEffect
 exports[`Textarea component Should be render isReadOnly is true and needEffect is false 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small default needBorder noresize      borderColor_default"
+    class=" readonly container small default needBorder noresize       borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -107,7 +107,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render isReadOnly is true and needEffect is true 1`] = `
 <DocumentFragment>
   <textarea
-    class=" readonly container small default needBorder noresize     effect borderColor_default"
+    class=" readonly container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -119,7 +119,7 @@ exports[`Textarea component Should be render isReadOnly is true and needEffect i
 exports[`Textarea component Should be render maxLength in number 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -131,7 +131,7 @@ exports[`Textarea component Should be render maxLength in number 1`] = `
 exports[`Textarea component Should be render maxLength in string 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -154,7 +154,7 @@ exports[`Textarea component Should be render needAppearance is false  1`] = `
 exports[`Textarea component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default noBorder noresize     effect borderColor_default"
+    class="  container small default noBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -165,7 +165,7 @@ exports[`Textarea component Should be render needBorder is false 1`] = `
 exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -176,7 +176,7 @@ exports[`Textarea component Should be render needReadOnlyStyle is false  1`] = `
 exports[`Textarea component Should be render placeholder 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -188,7 +188,7 @@ exports[`Textarea component Should be render placeholder 1`] = `
 exports[`Textarea component Should be render text 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -201,7 +201,7 @@ exports[`Textarea component Should be render text 1`] = `
 exports[`Textarea component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -212,7 +212,7 @@ exports[`Textarea component Should be render with the basic set of default props
 exports[`Textarea component Should render Varient - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -223,7 +223,7 @@ exports[`Textarea component Should render Varient - default 1`] = `
 exports[`Textarea component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small primary needBorder noresize     effect borderColor_default"
+    class="  container small primary needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -234,7 +234,7 @@ exports[`Textarea component Should render Varient - primary 1`] = `
 exports[`Textarea component Should render animated is false - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize     effect borderColor_default"
+    class="  container large default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -245,7 +245,7 @@ exports[`Textarea component Should render animated is false - large 1`] = `
 exports[`Textarea component Should render animated is false - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize     effect borderColor_default"
+    class="  container medium default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -256,7 +256,7 @@ exports[`Textarea component Should render animated is false - medium 1`] = `
 exports[`Textarea component Should render animated is false - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -267,7 +267,7 @@ exports[`Textarea component Should render animated is false - small 1`] = `
 exports[`Textarea component Should render animated is false - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize     effect borderColor_default"
+    class="  container xmedium default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -278,7 +278,7 @@ exports[`Textarea component Should render animated is false - xmedium 1`] = `
 exports[`Textarea component Should render animated is false - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize     effect borderColor_default"
+    class="  container xsmall default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -289,7 +289,7 @@ exports[`Textarea component Should render animated is false - xsmall 1`] = `
 exports[`Textarea component Should render animated is true - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize  largeanimated   effect borderColor_default"
+    class="  container large default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -300,7 +300,7 @@ exports[`Textarea component Should render animated is true - large 1`] = `
 exports[`Textarea component Should render animated is true - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize  undefined   effect borderColor_default"
+    class="  container medium default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -311,7 +311,7 @@ exports[`Textarea component Should render animated is true - medium 1`] = `
 exports[`Textarea component Should render animated is true - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize  smallanimated   effect borderColor_default"
+    class="  container small default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -322,7 +322,7 @@ exports[`Textarea component Should render animated is true - small 1`] = `
 exports[`Textarea component Should render animated is true - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize  xmediumanimated   effect borderColor_default"
+    class="  container xmedium default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -333,7 +333,7 @@ exports[`Textarea component Should render animated is true - xmedium 1`] = `
 exports[`Textarea component Should render animated is true - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize  xsmallanimated   effect borderColor_default"
+    class="  container xsmall default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -344,7 +344,7 @@ exports[`Textarea component Should render animated is true - xsmall 1`] = `
 exports[`Textarea component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -355,7 +355,7 @@ exports[`Textarea component Should render borderColor - default 1`] = `
 exports[`Textarea component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_transparent"
+    class="  container small default needBorder noresize     effect  borderColor_transparent"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -366,7 +366,7 @@ exports[`Textarea component Should render borderColor - transparent 1`] = `
 exports[`Textarea component Should render resize  - both 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeboth     effect borderColor_default"
+    class="  container small default needBorder resizeboth     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -377,7 +377,7 @@ exports[`Textarea component Should render resize  - both 1`] = `
 exports[`Textarea component Should render resize  - horizontal 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeX     effect borderColor_default"
+    class="  container small default needBorder resizeX     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -388,7 +388,7 @@ exports[`Textarea component Should render resize  - horizontal 1`] = `
 exports[`Textarea component Should render resize  - none 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -399,7 +399,7 @@ exports[`Textarea component Should render resize  - none 1`] = `
 exports[`Textarea component Should render resize  - vertical 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder resizeY     effect borderColor_default"
+    class="  container small default needBorder resizeY     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -410,7 +410,7 @@ exports[`Textarea component Should render resize  - vertical 1`] = `
 exports[`Textarea component Should render size  - large 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container large default needBorder noresize  largeanimated   effect borderColor_default"
+    class="  container large default needBorder noresize  largeanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -421,7 +421,7 @@ exports[`Textarea component Should render size  - large 1`] = `
 exports[`Textarea component Should render size  - medium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container medium default needBorder noresize  undefined   effect borderColor_default"
+    class="  container medium default needBorder noresize  undefined   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -432,7 +432,7 @@ exports[`Textarea component Should render size  - medium 1`] = `
 exports[`Textarea component Should render size  - small 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container small default needBorder noresize  smallanimated   effect borderColor_default"
+    class="  container small default needBorder noresize  smallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -443,7 +443,7 @@ exports[`Textarea component Should render size  - small 1`] = `
 exports[`Textarea component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xmedium default needBorder noresize  xmediumanimated   effect borderColor_default"
+    class="  container xmedium default needBorder noresize  xmediumanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -454,7 +454,7 @@ exports[`Textarea component Should render size  - xmedium 1`] = `
 exports[`Textarea component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <textarea
-    class="  container xsmall default needBorder noresize  xsmallanimated   effect borderColor_default"
+    class="  container xsmall default needBorder noresize  xsmallanimated   effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"
@@ -467,7 +467,7 @@ exports[`Textarea component rendering ally clearLabel 1`] = `
   <textarea
     aria-label="TextAreaAriaLabel"
     aria-labelledby="TexareaAriaLabelledby"
-    class="  container small default needBorder noresize     effect borderColor_default"
+    class="  container small default needBorder noresize     effect  borderColor_default"
     data-id="TextareaComp"
     data-selector-id="textarea"
     data-test-id="TextareaComp"

package/es/Textarea/props/propTypes.js

@@ -27,5 +27,6 @@ export const propTypes = {
   a11y: PropTypes.shape({
     ariaLabel: PropTypes.string,
     ariaLabelledby: PropTypes.string
-  })
+  }),
+  isFocus: PropTypes.bool
 };

package/es/Typography/Typography.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils';
+import defaultStyle from "./css/Typography.module.css";
+
+const Typography = props => {
+  const {
+    children,
+    $ui_tagName,
+    $i18n_dataTitle,
+    testId,
+    customId,
+    $tagAttributes_text,
+    $a11yAttributes_text,
+    customStyle
+  } = props;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    typographyClass
+  } = cssJSLogic({
+    props,
+    style
+  });
+  return /*#__PURE__*/React.createElement($ui_tagName, {
+    className: typographyClass,
+    'data-title': $i18n_dataTitle,
+    'data-id': customId,
+    'data-test-id': testId,
+    ...$tagAttributes_text,
+    ...$a11yAttributes_text
+  }, children);
+};
+
+Typography.propTypes = propTypes;
+Typography.defaultProps = defaultProps;
+export default Typography;